/* ==========================================================================
   Supplementary Tailwind utilities
   css/original.css is a pre-compiled Tailwind build, so any utility class that
   was not used when it was compiled has no rule. The classes below are used by
   index.html but were missing, which broke the hero, grids, spacing and footer.
   Brand colours follow the palette in custom.css (coral => sky blue).
   ========================================================================== */

/* ---------- Base ---------- */
html.scroll-smooth, .scroll-smooth { scroll-behavior: smooth; }
.antialiased { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
.selection\:bg-coral-500 *::selection, .selection\:bg-coral-500::selection { background-color: #0284c7; }
.selection\:text-white *::selection, .selection\:text-white::selection { color: #fff; }

/* ---------- Layout / sizing ---------- */
.min-h-\[660px\] { min-height: 660px; }
.w-\[240px\] { width: 240px; }
.aspect-\[16\/10\] { aspect-ratio: 16 / 10; }
.col-span-full { grid-column: 1 / -1; }
.mb-16 { margin-bottom: 4rem; }
.-mt-10 { margin-top: -2.5rem; }
.py-18 { padding-top: 4.5rem; padding-bottom: 4.5rem; }

/* ---------- Positioning ---------- */
.-top-6 { top: -1.5rem; }
.-bottom-6 { bottom: -1.5rem; }
.bottom-16 { bottom: 4rem; }
.-left-4 { left: -1rem; }
.-right-4 { right: -1rem; }
.translate-y-28 { --tw-translate-y: 7rem; transform: translate(var(--tw-translate-x, 0), var(--tw-translate-y)); }

/* ---------- Colours: backgrounds ---------- */
.bg-navy-950 { background-color: #0a1022; }
.bg-navy-500 { background-color: #475569; }
.bg-black\/75 { background-color: rgb(0 0 0 / .75); }
.bg-white\/50 { background-color: rgb(255 255 255 / .5); }
.bg-cyan-100 { background-color: #cffafe; }
.bg-cyan-500\/20 { background-color: rgb(6 182 212 / .2); }
.bg-emerald-100 { background-color: #d1fae5; }
.bg-emerald-400 { background-color: #34d399; }
.bg-emerald-50\/50 { background-color: rgb(236 253 245 / .5); }
.bg-emerald-600\/30 { background-color: rgb(5 150 105 / .3); }
.bg-mint-500\/20 { background-color: rgb(16 185 129 / .2); }
.bg-pink-100 { background-color: #fce7f3; }
.bg-teal-100 { background-color: #ccfbf1; }
.bg-cover { background-size: cover; }
.bg-center { background-position: center; }

/* Gradient stops */
:where(.from-black\/80) { --tw-gradient-from: rgb(0 0 0 / .8); --tw-gradient-to: rgb(0 0 0 / 0); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); }
:where(.from-black\/85) { --tw-gradient-from: rgb(0 0 0 / .85); --tw-gradient-to: rgb(0 0 0 / 0); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); }
:where(.via-black\/65) { --tw-gradient-to: rgb(0 0 0 / 0); --tw-gradient-stops: var(--tw-gradient-from), rgb(0 0 0 / .65), var(--tw-gradient-to); }
:where(.via-black\/70) { --tw-gradient-to: rgb(0 0 0 / 0); --tw-gradient-stops: var(--tw-gradient-from), rgb(0 0 0 / .7), var(--tw-gradient-to); }
:where(.via-sky-400) { --tw-gradient-to: rgb(56 189 248 / 0); --tw-gradient-stops: var(--tw-gradient-from), #38bdf8, var(--tw-gradient-to); }
.to-navy-950\/90 { --tw-gradient-to: rgb(10 16 34 / .9); }
.to-navy-950\/95 { --tw-gradient-to: rgb(10 16 34 / .95); }

/* ---------- Colours: text ---------- */
.text-navy-950 { color: #0a1022; }
.text-gray-200 { color: #e5e7eb; }
.text-cyan-300 { color: #67e8f9; }
.text-cyan-600 { color: #0891b2; }
.text-emerald-300 { color: #6ee7b7; }
.text-emerald-800 { color: #065f46; }
.text-emerald-950 { color: #022c22; }
.text-orange-600 { color: #ea580c; }
.text-pink-600 { color: #db2777; }
.text-teal-600 { color: #0d9488; }
.placeholder\:text-navy-500::placeholder { color: #64748b; }

/* ---------- Colours: borders ---------- */
.border-coral-200\/80 { border-color: rgb(186 230 253 / .8); }
.border-cyan-400\/30 { border-color: rgb(34 211 238 / .3); }
.border-mint-400\/40 { border-color: rgb(52 211 153 / .4); }
.border-navy-100\/80 { border-color: rgb(226 232 240 / .8); }
.border-navy-200\/60 { border-color: rgb(203 213 225 / .6); }
.focus\:border-coral-500:focus { border-color: #0284c7; }

/* ---------- Effects ---------- */
.opacity-90 { opacity: .9; }
.drop-shadow-lg { filter: drop-shadow(0 10px 8px rgb(0 0 0 / .04)) drop-shadow(0 4px 3px rgb(0 0 0 / .1)); }
.shadow-2xs { box-shadow: 0 1px rgb(0 0 0 / .05); }
.shadow-soft-sm { box-shadow: 0 6px 16px -10px rgba(27, 42, 74, .18); }
.shadow-soft-md { box-shadow: 0 16px 40px -18px rgba(27, 42, 74, .22); }

/* ---------- Hover / group-hover ---------- */
.hover\:bg-blue-500:hover { background-color: #3b82f6; }
.hover\:bg-emerald-600:hover { background-color: #059669; }
.hover\:bg-emerald-600\/50:hover { background-color: rgb(5 150 105 / .5); }
.hover\:bg-pink-600:hover { background-color: #db2777; }
.hover\:bg-white\/25:hover { background-color: rgb(255 255 255 / .25); }
.hover\:text-coral-400:hover { color: #38bdf8; }
.hover\:text-gray-300:hover { color: #d1d5db; }
.hover\:text-navy-950:hover { color: #0a1022; }
.hover\:shadow-brand-sm:hover { box-shadow: 0 8px 20px -10px rgba(2, 132, 199, .45); }
.hover\:shadow-soft-md:hover { box-shadow: 0 16px 40px -18px rgba(27, 42, 74, .22); }
.group:hover .group-hover\:scale-110 { transform: scale(1.1); }
.group:hover .group-hover\:translate-x-1 { transform: translateX(.25rem); }

/* ---------- sm (≥640px) ---------- */
@media (min-width: 640px) {
  .sm\:py-20 { padding-top: 5rem; padding-bottom: 5rem; }
  .sm\:py-24 { padding-top: 6rem; padding-bottom: 6rem; }
  .sm\:py-32 { padding-top: 8rem; padding-bottom: 8rem; }
  .sm\:p-10 { padding: 2.5rem; }
  .sm\:text-lg { font-size: 1.125rem; line-height: 1.75rem; }
  .sm\:text-5xl { font-size: 3rem; line-height: 1.1; }
  .sm\:top-8 { top: 2rem; }
  .sm\:bottom-8 { bottom: 2rem; }
  .sm\:left-8 { left: 2rem; }
  .sm\:right-8 { right: 2rem; }
  .sm\:-left-6 { left: -1.5rem; }
  .sm\:-right-6 { right: -1.5rem; }
}

/* ---------- md (≥768px) ---------- */
@media (min-width: 768px) {
  .md\:w-\[320px\] { width: 320px; }
  .md\:text-6xl { font-size: 3.75rem; line-height: 1.05; }
  .md\:items-end { align-items: flex-end; }
  .md\:divide-x > :not([hidden]) ~ :not([hidden]) { border-left-width: 1px; border-right-width: 0; }
  .md\:divide-y-0 > :not([hidden]) ~ :not([hidden]) { border-top-width: 0; border-bottom-width: 0; }
}

/* ---------- lg (≥1024px) ---------- */
@media (min-width: 1024px) {
  .lg\:h-\[740px\] { height: 740px; }
  .lg\:grid-cols-12 { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .lg\:col-span-3 { grid-column: span 3 / span 3; }
  .lg\:col-span-4 { grid-column: span 4 / span 4; }
  .lg\:col-span-5 { grid-column: span 5 / span 5; }
  .lg\:col-span-7 { grid-column: span 7 / span 7; }
  .lg\:max-w-none { max-width: none; }
  .lg\:pl-6 { padding-left: 1.5rem; }
  .lg\:py-18 { padding-top: 4.5rem; padding-bottom: 4.5rem; }
  .lg\:text-4xl { font-size: 2.25rem; line-height: 2.5rem; }
  .lg\:text-6xl { font-size: 3.75rem; line-height: 1.05; }
}

/* custom.css forces md:grid-cols-* with !important; 12-col layouts must win at lg */
@media (min-width: 1024px) {
  .grid.lg\:grid-cols-12 { grid-template-columns: repeat(12, minmax(0, 1fr)) !important; }
}

/* "Why Choose Us" grid: even 1px hairlines between every cell at all breakpoints */
.why-grid { gap: 1px; background-color: #e2e8f0; }
.why-grid > div { background-color: #fff; }
.why-grid > div:hover { background-color: #fffdfa; }

/* Mobile hero: slides are absolutely positioned, so give the section enough
   height for the content, keep dots clear of the overlapping search card,
   and hide the side arrows that would cover the copy (swipe/dots remain). */
@media (max-width: 639px) {
  #home-hero { min-height: 820px; }
  #hero-prev-btn, #hero-next-btn { display: none; }
}

/* ---------- Site header: keep the main nav pinned while scrolling ----------
   The nav's own `sticky` can't work because it is confined to <header>, so the
   whole header sticks. On md+ the 37px contact bar scrolls away (negative top)
   and only the white nav stays visible. */
header.site-header { position: sticky; top: 0; z-index: 50; }
@media (min-width: 768px) {
  header.site-header { top: -37px; }
}

/* In-page links (Why Us, Testimonials, Blog, Contact): land just below the
   pinned nav instead of tucking the section heading underneath it. */
section[id] { scroll-margin-top: 40px; }

/* ==========================================================================
   Utilities used by the sub-pages (why-us, testimonials, blog, contact,
   about, match) that are missing from the pre-compiled original.css
   ========================================================================== */
.bottom-10 { bottom: 2.5rem; }
.-bottom-5 { bottom: -1.25rem; }
.top-40 { top: 10rem; }
.max-w-\[1100px\] { max-width: 1100px; }
.max-w-\[440px\] { max-width: 440px; }
.min-w-\[210px\] { min-width: 210px; }
.mb-14 { margin-bottom: 3.5rem; }
.p-10 { padding: 2.5rem; }
.size-40 { width: 10rem; height: 10rem; }
.h-4\.5 { height: 1.125rem; }
.w-4\.5 { width: 1.125rem; }
.space-y-16 > :not([hidden]) ~ :not([hidden]) { margin-top: 4rem; }
.fill-currentColor { fill: currentColor; }

.bg-cyan-700 { background-color: #0e7490; }
.bg-purple-700 { background-color: #7e22ce; }
.bg-\[\#0284c7\] { background-color: #0284c7; }
.bg-amber-50\/80 { background-color: rgb(255 251 235 / .8); }
.bg-mint-200\/40 { background-color: rgb(165 231 212 / .4); }
.text-\[\#0284c7\] { color: #0284c7; }
.text-purple-600 { color: #9333ea; }
.text-amber-950 { color: #451a03; }
.border-coral-500\/30 { border-color: rgb(2 132 199 / .3); }
.border-navy-50 { border-color: #f8fafc; }
.placeholder-navy-400::placeholder { color: #64748b; }
:where(.from-navy-950) { --tw-gradient-from: #0a1022; --tw-gradient-to: rgb(10 16 34 / 0); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); }
:where(.from-coral-50\/90) { --tw-gradient-from: rgb(240 247 255 / .9); --tw-gradient-to: rgb(240 247 255 / 0); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); }
:where(.via-sky-50\/50) { --tw-gradient-to: rgb(240 249 255 / 0); --tw-gradient-stops: var(--tw-gradient-from), rgb(240 249 255 / .5), var(--tw-gradient-to); }
.shadow-soft-xl { box-shadow: 0 36px 80px -28px rgba(27, 42, 74, .3); }
.selection\:bg-coral-100 *::selection, .selection\:bg-coral-100::selection { background-color: #e0f2fe; }
.selection\:text-coral-800 *::selection, .selection\:text-coral-800::selection { color: #0c4a6e; }

/* <details> FAQ states */
.group[open] .group-open\:rotate-180 { transform: rotate(180deg); }
.group[open] .group-open\:text-coral-500 { color: #0284c7; }
.group[open] .group-open\:text-coral-600 { color: #0369a1; }
.open\:border-coral-300[open] { border-color: #7dd3fc; }
.open\:shadow-soft[open] { box-shadow: 0 12px 32px -14px rgba(27, 42, 74, .18); }

@media (min-width: 640px) {
  .sm\:p-12 { padding: 3rem; }
  .sm\:p-14 { padding: 3.5rem; }
  .sm\:text-sm { font-size: .875rem; line-height: 1.25rem; }
  .sm\:text-\[17px\] { font-size: 17px; }
  .sm\:-top-6 { top: -1.5rem; }
  .sm\:-bottom-6 { bottom: -1.5rem; }
  .sm\:-right-4 { right: -1rem; }
}
@media (min-width: 768px) {
  .md\:w-1\/2 { width: 50%; }
}
@media (min-width: 1024px) {
  .lg\:py-14 { padding-top: 3.5rem; padding-bottom: 3.5rem; }
  .lg\:min-h-\[580px\] { min-height: 580px; }
  .lg\:order-last { order: 9999; }
  .lg\:text-\[3\.25rem\] { font-size: 3.25rem; line-height: 1.05; }
}

/* ==========================================================================
   MOBILE RESPONSIVE REFINEMENTS (all pages)
   ========================================================================== */

/* Media never wider than its container */
img, video, iframe, svg { max-width: 100%; }
img { height: auto; }


/* Wide tables (e.g. "Sky Global vs Traditional Agents") scroll sideways
   inside their card instead of squashing every column into a word stack */
.overflow-x-auto { -webkit-overflow-scrolling: touch; }
@media (max-width: 767px) {
  .overflow-x-auto > table { min-width: 600px; }
}

@media (max-width: 639px) {
  /* Readable minimum for the smallest labels (was 9–10.5px) */
  .text-\[9px\], .text-\[10px\], .text-\[10\.5px\] { font-size: 11px !important; line-height: 1.35; }

  /* Big CTA buttons: full width & centred when they stack */
  .flex-wrap > a.rounded-full, .flex-wrap > button.rounded-full { justify-content: center; }

  /* iOS zooms in on inputs smaller than 16px — prevent that */
  input[type="text"], input[type="email"], input[type="tel"], input[type="search"], select, textarea { font-size: 16px !important; }

  /* Footer bottom bar: centred, links wrap neatly */
  .footer-bottom { text-align: center; }
  .footer-bottom > div { flex-wrap: wrap; justify-content: center; gap: .5rem 1.25rem; }
  .footer-bottom a { white-space: nowrap; }

  /* Match page filter bar: one control per row, full width */
  .match-filters, .match-filters + div { width: 100%; min-width: 0; }
  .match-filters { flex-direction: column; align-items: stretch; }
  .match-filters > div, .match-filters > label { width: 100%; min-width: 0; }
  .match-filters > div > span:first-child:not(.absolute) { flex: 0 0 5.5rem; }
  .match-filters select, .match-filters + div select { flex: 1 1 0; width: 100%; min-width: 0; }
  .match-filters .min-w-\[210px\] { min-width: 0; }

  /* Match results header: count on one line, legend wraps below */
  .results-bar { flex-direction: column; align-items: flex-start; gap: .5rem; }
  .results-bar > div { flex-wrap: wrap; }
}