/* =====================================================================
   Tailwind supplement.

   WHY THIS FILE EXISTS
   assets/main.css is a FIXED, pre-compiled Tailwind v4 bundle shipped with the
   template. It contains only the utilities the template's own markup happened
   to use. There is no build step on this project, so any class written in our
   views that the template never used does not exist and silently does nothing —
   no error, no warning, it just has no effect.

   That is what made the Services dropdown collapse into a black sliver
   (w-[420px] was missing, so the panel had no width and main.js sized the
   container from it) and the hero image render at full strength (opacity-40
   was missing).

   ESCAPING — READ BEFORE EDITING
   Tailwind writes arbitrary values into selectors with BOTH brackets escaped:
       .w-\[150px\]      correct
       .w-\[150px]       WRONG — the identifier ends at "px", the stray "]"
                         makes the selector invalid and the browser silently
                         drops the entire rule.
   Same for "/" (\/), ":" (\:), "." (\.), "%" (\%) and "=" (\=).
   A leading digit is written as an escaped codepoint:
       2xl:inline  ->  .\32xl\:inline

   Values follow the template's theme: --spacing is .25rem, breakpoints are
   40/48/64/80/96rem.

   Loaded AFTER main.css and BEFORE custom.css.

   If new markup has no visible effect, check the class against main.css before
   assuming the CSS is wrong — odds are the utility just is not in the bundle.
   See README.md for the audit script.
   ===================================================================== */

/* ---------------------------------------------------------------- sizing */
.w-5              { width: 1.25rem; }
.w-2\/3           { width: 66.666667%; }
.w-\[150px\]      { width: 150px; }
.h-\[220px\]      { height: 220px; }
.h-\[260px\]      { height: 260px; }
.h-\[280px\]      { height: 280px; }
.h-\[380px\]      { height: 380px; }
.min-h-\[70vh\]   { min-height: 70vh; }

.max-w-\[320px\]  { max-width: 320px; }
.max-w-\[420px\]  { max-width: 420px; }
.max-w-\[520px\]  { max-width: 520px; }
.max-w-\[560px\]  { max-width: 560px; }
.max-w-\[620px\]  { max-width: 620px; }
.max-w-\[640px\]  { max-width: 640px; }
.max-w-\[760px\]  { max-width: 760px; }
.max-w-\[820px\]  { max-width: 820px; }

/* ---------------------------------------------------------------- spacing */
.pt-0    { padding-top: 0; }
.pt-5    { padding-top: 1.25rem; }
.pb-5    { padding-bottom: 1.25rem; }
.pb-14   { padding-bottom: 3.5rem; }
.mt-0\.5 { margin-top: .125rem; }
.mt-2    { margin-top: .5rem; }
.mt-5    { margin-top: 1.25rem; }
.top-6   { top: 1.5rem; }
.right-6 { right: 1.5rem; }
.inset-x-0 { left: 0; right: 0; }
.left-\[-9999px\] { left: -9999px; }
.-top-\[30\%\]    { top: -30%; }
.-top-\[40\%\]    { top: -40%; }

.gap-x-10 { column-gap: 2.5rem; }
.gap-y-1  { row-gap: .25rem; }
.gap-y-10 { row-gap: 2.5rem; }

/* ---------------------------------------------------------------- radius */
.rounded-\[16px\] { border-radius: 16px; }
.rounded-\[22px\] { border-radius: 22px; }
.rounded-\[24px\] { border-radius: 24px; }
.rounded-\[32px\] { border-radius: 32px; }

/* ---------------------------------------------------------------- colour */
.text-white\/10 { color: rgb(255 255 255 / .1); }
.text-white\/20 { color: rgb(255 255 255 / .2); }
.text-white\/40 { color: rgb(255 255 255 / .4); }
.text-white\/55 { color: rgb(255 255 255 / .55); }
.text-white\/70 { color: rgb(255 255 255 / .7); }

.bg-black\/40        { background-color: rgb(0 0 0 / .4); }
.bg-white\/\[0\.03\] { background-color: rgb(255 255 255 / .03); }
.hover\:bg-white\/5:hover         { background-color: rgb(255 255 255 / .05); }
.hover\:bg-white\/\[0\.02\]:hover { background-color: rgb(255 255 255 / .02); }

.opacity-30 { opacity: .3; }
.opacity-40 { opacity: .4; }
.opacity-60 { opacity: .6; }
.hover\:opacity-80:hover  { opacity: .8; }
.hover\:opacity-100:hover { opacity: 1; }

/* ---------------------------------------------------------------- type */
.leading-none        { line-height: 1; }
.tracking-\[1\.2px\] { letter-spacing: 1.2px; }
.object-left { object-position: left; }
.object-top  { object-position: top; }

/* ---------------------------------------------------------------- borders */
.divide-y > :not([hidden]) ~ :not([hidden]) {
  border-top-width: 1px;
  border-bottom-width: 0;
}
.divide-stroke-1\/10 > :not([hidden]) ~ :not([hidden]) {
  border-color: rgb(148 174 207 / .1);
}
.first\:pt-0:first-child { padding-top: 0; }
.last\:pb-0:last-child   { padding-bottom: 0; }

/* ---------------------------------------------------------------- motion */
.duration-700 { transition-duration: .7s; }
.ease-custom-ease-1 { transition-timing-function: cubic-bezier(.25, .46, .45, .94); }
.group:hover .group-hover\:rotate-45 { rotate: 45deg; }
.blur-\[120px\] { filter: blur(120px); }

/* ---------------------------------------------------------------- state variants */
.data-\[active\=true\]\:visible[data-active="true"] { visibility: visible; }
.data-\[active\=true\]\:pointer-events-auto[data-active="true"] { pointer-events: auto; }

/* Swiper: scale up the centred testimonial portrait. */
.\[\&_\.swiper-slide-active_\[data-testimonial-image\]\]\:scale-\[1\.02\]
  .swiper-slide-active [data-testimonial-image] {
  scale: 1.02;
}

/* ---------------------------------------------------------------- purpose-built gradients
   Tailwind's gradient utilities are a multi-class system driven by
   --tw-gradient-* custom properties. Reimplementing that machinery for four
   call sites would be fragile, so each gradient we need is a single class. */
.pwd-hero-fade {
  background-image: linear-gradient(to bottom, rgb(0 0 0 / .7) 0%, rgb(0 0 0 / .4) 45%, #000 100%);
}
.pwd-caption-fade {
  background-image: linear-gradient(to top, rgb(0 0 0 / .9) 0%, rgb(0 0 0 / .6) 55%, transparent 100%);
}
.pwd-accent-rule {
  background-image: radial-gradient(circle at 50% 0%, var(--color-opai-indigo) 0%, transparent 100%);
}
.pwd-accent-glow {
  background-image: radial-gradient(circle, color-mix(in srgb, var(--color-opai-indigo) 30%, transparent) 0%, transparent 70%);
}

/* ---------------------------------------------------------------- responsive */
@media (min-width: 48rem) {           /* md */
  .md\:p-6   { padding: 1.5rem; }
  .md\:p-8   { padding: 2rem; }
  .md\:pb-6  { padding-bottom: 1.5rem; }
  .md\:px-6  { padding-inline: 1.5rem; }
  .md\:pt-40 { padding-top: 10rem; }
  .md\:py-24 { padding-block: 6rem; }
  .md\:gap-x-16 { column-gap: 4rem; }
  .md\:h-\[420px\] { height: 420px; }
  .md\:h-\[440px\] { height: 440px; }
  .md\:h-\[460px\] { height: 460px; }
  .md\:rounded-\[28px\] { border-radius: 28px; }
}

@media (min-width: 64rem) {           /* lg */
  .lg\:gap-8       { gap: 2rem; }
  .lg\:gap-x-16    { column-gap: 4rem; }
  .lg\:py-28       { padding-block: 7rem; }
  .lg\:pt-44       { padding-top: 11rem; }
  .lg\:pb-20       { padding-bottom: 5rem; }
  .lg\:-mt-4       { margin-top: -1rem; }
  .lg\:w-\[340px\] { width: 340px; }
  .lg\:col-span-6  { grid-column: span 6 / span 6; }
}

@media (min-width: 80rem) {           /* xl */
  .xl\:gap-12      { gap: 3rem; }
  .xl\:w-\[166px\] { width: 166px; }
  .xl\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .xl\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (min-width: 96rem) {           /* 2xl */
  .\32xl\:inline { display: inline; }
  .\32xl\:py-39  { padding-block: 9.75rem; }
  .\32xl\:py-44  { padding-block: 11rem; }
}

/* max-xl: applies BELOW the xl breakpoint. */
@media not all and (min-width: 80rem) {
  .max-xl\:mx-auto        { margin-inline: auto; }
  .max-xl\:text-center    { text-align: center; }
  .max-xl\:justify-center { justify-content: center; }
}