/* =====================================================================
   Utility classes used by hand-edited pages but absent from the scraped
   Tailwind build.

   assets/style_1.css and _next/static/chunks/9077382a1f4ed522.css are a
   pre-compiled Tailwind bundle containing only the utilities creiden.com
   itself shipped. Pages edited after the scrape introduced the default
   Tailwind palette, spacing and layout utilities, which had no rules behind
   them. Values below follow Tailwind v4 defaults; breakpoints match the
   bundle (sm 40rem / md 48rem / lg 64rem).

   Classes with brackets, parentheses or commas are matched with [class~=...]
   to sidestep CSS identifier escaping.
   ===================================================================== */

/* --- default palette: text ------------------------------------------- */
.text-gray-300 { color: #d1d5db; }
.text-gray-400 { color: #9ca3af; }
.text-gray-500 { color: #6b7280; }
.text-gray-700 { color: #374151; }
.text-gray-800 { color: #1f2937; }
.text-sky-100 { color: #e0f2fe; }
.text-sky-300 { color: #7dd3fc; }
.text-sky-400 { color: #38bdf8; }
.text-sky-700 { color: #0369a1; }
.text-emerald-300 { color: #6ee7b7; }
.text-emerald-600 { color: #059669; }
.text-emerald-700 { color: #047857; }
.text-indigo-300 { color: #a5b4fc; }
.text-indigo-600 { color: #4f46e5; }
.text-indigo-700 { color: #4338ca; }
.text-teal-300 { color: #5eead4; }
.text-teal-700 { color: #0f766e; }
.text-purple-600 { color: #9333ea; }

/* --- default palette: background ------------------------------------- */
.bg-gray-100 { background-color: #f3f4f6; }
.bg-blue-50 { background-color: #eff6ff; }
.bg-sky-50 { background-color: #f0f9ff; }
.bg-sky-100 { background-color: #e0f2fe; }
.bg-emerald-50 { background-color: #ecfdf5; }
.bg-emerald-100 { background-color: #d1fae5; }
.bg-emerald-500 { background-color: #10b981; }
.bg-emerald-600 { background-color: #059669; }
.bg-indigo-50 { background-color: #eef2ff; }
.bg-indigo-100 { background-color: #e0e7ff; }
.bg-teal-50 { background-color: #f0fdfa; }
.bg-teal-100 { background-color: #ccfbf1; }
.bg-purple-50 { background-color: #faf5ff; }
.bg-cyan-50 { background-color: #ecfeff; }
.bg-sky-50\/60 { background-color: color-mix(in oklab, #f0f9ff 60%, transparent); }
.bg-emerald-50\/60 { background-color: color-mix(in oklab, #ecfdf5 60%, transparent); }

/* --- default palette: border ----------------------------------------- */
.border-gray-100 { border-color: #f3f4f6; }
.border-gray-200 { border-color: #e5e7eb; }
.border-sky-100 { border-color: #e0f2fe; }
.border-sky-200 { border-color: #bae6fd; }
.border-emerald-100 { border-color: #d1fae5; }
.border-sky-200\/60 { border-color: color-mix(in oklab, #bae6fd 60%, transparent); }
.border-l-4 { border-left-style: var(--tw-border-style, solid); border-left-width: 4px; }

/* --- gradient stops --------------------------------------------------- */
[class~="from-[#002851]"] {
  --tw-gradient-from: #002851;
  --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
}
[class~="to-[#00539F]"] {
  --tw-gradient-to: #00539f;
  --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
}

/* --- spacing and sizing ----------------------------------------------- */
.px-1\.5 { padding-inline: 0.375rem; }
.pr-10 { padding-right: 2.5rem; }
.ml-2\.5 { margin-left: 0.625rem; }
.w-3\.5 { width: 0.875rem; }
.h-16 { height: 4rem; }
.max-w-xl { max-width: 36rem; }
.max-w-3xl { max-width: 48rem; }
.tracking-wider { --tw-tracking: 0.05em; letter-spacing: 0.05em; }
.cursor-default { cursor: default; }
[class~="pt-[160px]"] { padding-top: 160px; }
[class~="leading-[1.8]"] { --tw-leading: 1.8; line-height: 1.8; }

.space-y-2\.5 > :not(:last-child) { margin-bottom: 0.625rem; }
.space-y-5 > :not(:last-child) { margin-bottom: 1.25rem; }
.space-y-6 > :not(:last-child) { margin-bottom: 1.5rem; }
.space-y-8 > :not(:last-child) { margin-bottom: 2rem; }
.space-y-16 > :not(:last-child) { margin-bottom: 4rem; }

/* --- fixed type ------------------------------------------------------- */
[class~="text-[14.5px]"] { font-size: 14.5px; }

/* --- fluid type ------------------------------------------------------- */
[class~="text-[clamp(17px,2vw,20px)]"] { font-size: clamp(17px, 2vw, 20px); }
[class~="text-[clamp(30px,4vw,44px)]"] { font-size: clamp(30px, 4vw, 44px); }
[class~="text-[clamp(32px,4vw,48px)]"] { font-size: clamp(32px, 4vw, 48px); }
[class~="text-[clamp(32px,5vw,46px)]"] { font-size: clamp(32px, 5vw, 46px); }
[class~="text-[clamp(32px,5vw,50px)]"] { font-size: clamp(32px, 5vw, 50px); }
[class~="text-[clamp(36px,5.5vw,56px)]"] { font-size: clamp(36px, 5.5vw, 56px); }

/* --- hand-edited hero gradient --------------------------------------- */
[class~="[background-image:radial-gradient(ellipse_60%_50%_at_10%_15%,color-mix(in_srgb,var(--color-creiden-cyan)_15%,transparent),transparent_70%),radial-gradient(ellipse_55%_60%_at_88%_80%,color-mix(in_srgb,var(--color-creiden-blue)_12%,transparent),transparent_65%)]"] {
  background-image:
    radial-gradient(ellipse 60% 50% at 10% 15%, color-mix(in srgb, var(--color-creiden-cyan) 15%, transparent), transparent 70%),
    radial-gradient(ellipse 55% 60% at 88% 80%, color-mix(in srgb, var(--color-creiden-blue) 12%, transparent), transparent 65%);
}

/* --- arbitrary variants ----------------------------------------------- */
[class~="[&_a]:text-creiden-blue"] a { color: var(--creiden-blue); }
[class~="[&_a]:underline"] a { text-decoration-line: underline; }
[class~="[&_p+p]:mt-5"] p + p { margin-top: 1.25rem; }
[class~="[&_strong]:font-semibold"] strong { --tw-font-weight: 600; font-weight: 600; }
[class~="[&_strong]:text-fg-1"] strong { color: var(--fg-1); }

[class~="[&:last-of-type]:flex-1"]:last-of-type { flex: 1 1 0%; }
[class~="[&:last-of-type]:line-clamp-1"]:last-of-type {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  overflow: hidden;
}

[class~="[&.in]:opacity-100"].in { opacity: 1; }
[class~="[&.in]:scale-x-100"].in { --tw-scale-x: 100%; scale: var(--tw-scale-x) var(--tw-scale-y, 1); }
[class~="[&.in]:translate-none"].in { translate: none; }
[class~="[&[data-delay='1'].in]:delay-(--dur-instant)"][data-delay="1"].in { transition-delay: var(--dur-instant); }
[class~="[&[data-delay='2'].in]:delay-160"][data-delay="2"].in { transition-delay: 160ms; }
[class~="[&[data-delay='3'].in]:delay-240"][data-delay="3"].in { transition-delay: 240ms; }
[class~="[&[data-delay='4'].in]:delay-320"][data-delay="4"].in { transition-delay: 320ms; }
[class~="[&[data-delay='5'].in]:delay-400"][data-delay="5"].in { transition-delay: 400ms; }

[class~="after:content-['']"]::after { content: ""; }

/* --- long-form prose -------------------------------------------------- */
.prose { color: var(--fg-2); line-height: 1.75; }
.prose :where(h2) {
  margin-top: 2em;
  margin-bottom: 0.75em;
  color: var(--creiden-charcoal, #36454f);
  font-size: 1.5em;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.01em;
}
.prose :where(h3) {
  margin-top: 1.6em;
  margin-bottom: 0.6em;
  color: var(--creiden-charcoal, #36454f);
  font-size: 1.2em;
  font-weight: 600;
  line-height: 1.4;
}
.prose :where(p) { margin-block: 1.25em; }
.prose :where(ul, ol) { margin-block: 1.25em; padding-left: 1.6em; }
.prose :where(ul) { list-style: disc; }
.prose :where(ol) { list-style: decimal; }
.prose :where(li) { margin-block: 0.5em; }
.prose :where(a) {
  color: var(--creiden-blue, #00539f);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.prose :where(strong) { color: var(--fg-1); font-weight: 600; }
.prose :where(blockquote) {
  margin-block: 1.6em;
  padding-left: 1.2em;
  border-left: 3px solid var(--border-1, #e2e8f0);
  color: var(--fg-2);
  font-style: italic;
}
.prose :where(table) { width: 100%; margin-block: 1.6em; border-collapse: collapse; }
.prose :where(th, td) {
  padding: 0.6em 0.8em;
  border: 1px solid var(--border-1, #e2e8f0);
  text-align: left;
}
.prose :where(th) { background: var(--bg-2, #f8fafc); font-weight: 600; }
.prose :where(code) {
  padding: 0.15em 0.4em;
  border-radius: 4px;
  background: var(--bg-2, #f1f5f9);
  font-size: 0.9em;
}
.prose :where(img) { margin-block: 1.6em; border-radius: 12px; }

/* --- interaction states (after base rules so they win) ---------------- */
.hover\:bg-gray-50:hover { background-color: #f9fafb; }
.hover\:bg-gray-100:hover { background-color: #f3f4f6; }
.hover\:bg-gray-200:hover { background-color: #e5e7eb; }
.hover\:bg-sky-500:hover { background-color: #0ea5e9; }
.hover\:bg-sky-600:hover { background-color: #0284c7; }
.hover\:border-gray-300:hover { border-color: #d1d5db; }
.hover\:text-white:hover { color: #fff; }
.hover\:text-sky-400:hover { color: #38bdf8; }
.hover\:text-sky-700:hover { color: #0369a1; }
.hover\:shadow-md:hover {
  --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  box-shadow: var(--tw-shadow);
}
.focus\:outline-none:focus { outline: 2px solid transparent; outline-offset: 2px; }
.focus\:ring-sky-100:focus {
  --tw-ring-color: #e0f2fe;
  box-shadow: 0 0 0 3px #e0f2fe;
}

/* --- responsive ------------------------------------------------------- */
@media (min-width: 40rem) {
  .sm\:flex-row { flex-direction: row; }
  .sm\:w-auto { width: auto; }
}

@media (min-width: 48rem) {
  .md\:col-span-2 { grid-column: span 2 / span 2; }
  .md\:p-12 { padding: 3rem; }
  [class~="md:text-[42px]"] { font-size: 42px; }
}

@media (min-width: 64rem) {
  .lg\:grid-cols-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .lg\:grid-cols-12 { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .lg\:col-span-2 { grid-column: span 2 / span 2; }
  .lg\:col-span-5 { grid-column: span 5 / span 5; }
  .lg\:col-span-7 { grid-column: span 7 / span 7; }
}

@media (min-width: 900px) {
  [class~="min-[900px]:pt-[80px]"] { padding-top: 80px; }
}

@media (min-width: 1024px) {
  [class~="min-[1024px]:py-20"] { padding-block: 5rem; }
}

/* --- aspect ratio & object positioning --- */
.aspect-square { aspect-ratio: 1 / 1; }
.object-top { object-position: top center; }
.object-center { object-position: center; }