/*
 * UTECHS public site. Owner: frontend.
 * Colours, type families, easing and spacing come from tokens.css (--ut-*), linked before this file.
 * Layout uses logical properties, so dir="rtl" mirrors it. The forward cut and the progress line
 * follow reading direction; the symbol itself never mirrors.
 */

/* ------------------------------------------------------------------ fonts (self-hosted, OFL) */

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/assets/fonts/inter-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/assets/fonts/inter-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Space Grotesk";
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url("/assets/fonts/space-grotesk-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Space Grotesk";
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url("/assets/fonts/space-grotesk-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "IBM Plex Sans Arabic";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/ibm-plex-sans-arabic-400.woff2") format("woff2");
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC;
}
@font-face {
  font-family: "IBM Plex Sans Arabic";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/assets/fonts/ibm-plex-sans-arabic-500.woff2") format("woff2");
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC;
}
@font-face {
  font-family: "IBM Plex Sans Arabic";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/assets/fonts/ibm-plex-sans-arabic-600.woff2") format("woff2");
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC;
}
@font-face {
  font-family: "IBM Plex Sans Arabic";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/assets/fonts/ibm-plex-sans-arabic-700.woff2") format("woff2");
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC;
}

/* ------------------------------------------------------------------ site variables */

:root {
  --site-max: 1200px;
  --gutter: 16px;
  --grid-gap: 16px;
  /* Forward cut: one 45° corner, sized in steps with the layout (E1). */
  --cut: 14px;
  --cut-lg: 28px;
  --header-h: 64px;
  --radius-card: 12px;
  --font-body: var(--ut-font-text);
  --font-head: var(--ut-font-display);
  /* 1 in left-to-right pages, -1 in right-to-left: motion travels along the reading direction. */
  --dir: 1;
  color-scheme: light;
}
@media (min-width: 640px) {
  :root { --gutter: 24px; --grid-gap: 20px; --cut: 20px; --cut-lg: 40px; }
}
@media (min-width: 1024px) {
  :root { --gutter: 40px; --grid-gap: 24px; --cut: 28px; --cut-lg: 64px; --header-h: 76px; }
}
/* Arabic: Plex Arabic for Arabic script, Inter and Space Grotesk for the Latin words inside it. */
:root:lang(ar) {
  --font-body: "IBM Plex Sans Arabic", "Inter", var(--ut-font-arabic);
  --font-head: "IBM Plex Sans Arabic", "Space Grotesk", var(--ut-font-arabic);
}
[dir="rtl"] { --dir: -1; }

/* ------------------------------------------------------------------ base */

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-block-start: calc(var(--header-h) + 16px);
}
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--ut-bg);
  color: var(--ut-text);
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.625;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-wrap: break-word;
  overflow-x: clip;
}
html:lang(ar) body { font-size: 1.125rem; line-height: 1.8; }

main { flex: 1 0 auto; display: block; }
main:focus { outline: none; }

img, svg, picture { max-width: 100%; }
img { height: auto; display: block; }

h1, h2, h3, h4 {
  margin: 0;
  font-family: var(--font-head);
  font-weight: 600;
  color: var(--ut-text);
  letter-spacing: -0.02em;
  line-height: 1.12;
  text-wrap: balance;
}
h3 { font-size: 1.25rem; line-height: 1.3; letter-spacing: -0.01em; }
:lang(ar) :is(h1, h2, h3, h4) { letter-spacing: 0; line-height: 1.45; }

p, ul, ol, dl, figure, blockquote { margin: 0; }

a {
  color: var(--ut-link);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
}
a:hover { text-decoration-thickness: 2px; }

:focus-visible {
  outline: 2px solid var(--ut-focus);
  outline-offset: 2px;
  border-radius: 4px;
}

::selection { background: color-mix(in srgb, var(--ut-lime) 30%, var(--ut-white, #FFFFFF)); color: var(--ut-navy); }
.ut-dark ::selection { background: var(--ut-lime); color: var(--ut-navy); }

.ut-dark {
  background-color: var(--ut-bg);
  color: var(--ut-text);
  color-scheme: dark;
}

.sr-only {
  position: absolute !important;
  inline-size: 1px;
  block-size: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.icon { display: inline-block; flex: none; vertical-align: middle; }
[dir="rtl"] .icon--dir { transform: scaleX(-1); }

.container {
  inline-size: 100%;
  max-inline-size: calc(var(--site-max) + 2 * var(--gutter));
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.narrow { max-inline-size: calc(760px + 2 * var(--gutter)); }

/* ------------------------------------------------------------------ type */

.eyebrow {
  font-family: var(--font-head);
  font-weight: 500;
  font-size: 0.75rem;
  line-height: 1.3;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ut-accent);
}
:lang(ar) .eyebrow { letter-spacing: 0; text-transform: none; font-size: 0.9375rem; }

.display {
  font-size: clamp(2.25rem, 1.3rem + 4vw, 4.25rem);
  line-height: 1.04;
  letter-spacing: -0.03em;
}
:lang(ar) .display { font-size: clamp(2rem, 1.25rem + 3vw, 3.5rem); line-height: 1.35; letter-spacing: 0; }

.h1 { font-size: clamp(2rem, 1.45rem + 2.4vw, 3.25rem); line-height: 1.08; }
:lang(ar) .h1 { font-size: clamp(1.875rem, 1.4rem + 2vw, 2.875rem); line-height: 1.4; }

.section-title { font-size: clamp(1.75rem, 1.35rem + 1.7vw, 2.625rem); line-height: 1.1; }
:lang(ar) .section-title { font-size: clamp(1.625rem, 1.3rem + 1.4vw, 2.375rem); line-height: 1.4; }

.block-title { font-size: 1.375rem; line-height: 1.25; }

.lede {
  font-size: 1.125rem;
  line-height: 1.6;
  color: var(--ut-textSecondary);
  max-inline-size: 60ch;
}
@media (min-width: 1024px) { .lede { font-size: 1.1875rem; } }
:lang(ar) .lede { font-size: 1.25rem; line-height: 1.8; }

/* ------------------------------------------------------------------ buttons and links */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-block-size: 48px;
  padding: 12px 20px;
  border: 1px solid transparent;
  border-radius: 8px;
  font-family: var(--font-head);
  font-weight: 500;
  font-size: 0.9375rem;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition:
    background-color var(--ut-dur-fast) var(--ut-ease-forward),
    border-color var(--ut-dur-fast) var(--ut-ease-forward),
    color var(--ut-dur-fast) var(--ut-ease-forward);
}
:lang(ar) .btn { font-size: 1.0625rem; }
.btn .icon { inline-size: 18px; block-size: 18px; }
.btn .icon--forward { transition: transform var(--ut-dur-fast) var(--ut-ease-forward); }
.btn:hover .icon--forward, .btn:focus-visible .icon--forward { transform: translate(2px, -2px); }
[dir="rtl"] .btn .icon--forward { transform: scaleX(-1); }
[dir="rtl"] .btn:hover .icon--forward, [dir="rtl"] .btn:focus-visible .icon--forward { transform: scaleX(-1) translate(2px, -2px); }

/* Light ground: navy button, lime arrow (lime only inside navy). Dark ground: lime button, navy text. */
.btn--primary { background: var(--ut-accentFill); color: var(--ut-onAccentFill); border-color: var(--ut-accentFill); }
.btn--primary .icon { color: var(--ut-lime); }
.btn--primary:hover { background: var(--ut-slate); border-color: var(--ut-slate); color: var(--ut-cloud); }
.ut-dark .btn--primary .icon { color: var(--ut-navy); }
.ut-dark .btn--primary:hover { background: color-mix(in srgb, var(--ut-lime) 82%, var(--ut-cloud)); border-color: transparent; color: var(--ut-navy); }

.btn--secondary { background: var(--ut-surface); color: var(--ut-text); border-color: var(--ut-line); }
.btn--secondary .icon { color: var(--ut-accent); }
.btn--secondary:hover { border-color: var(--ut-textSecondary); }
.ut-dark .btn--secondary { background: transparent; border-color: var(--ut-navyLine); }
.ut-dark .btn--secondary:hover { border-color: var(--ut-slateSoft); }

.btn[disabled], .btn[aria-disabled="true"] { cursor: progress; opacity: 0.75; }

.btn-row { display: flex; flex-wrap: wrap; gap: 12px; }
.btn-stack { display: grid; gap: 12px; }
.btn-stack .btn { inline-size: 100%; }
@media (max-width: 639.98px) {
  .btn-row .btn { flex: 1 1 100%; }
}

.link-forward {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-block-size: 44px;
  font-family: var(--font-head);
  font-weight: 500;
  font-size: 0.9375rem;
  color: var(--ut-text);
  text-decoration: none;
}
.link-forward .icon { color: var(--ut-accent); transition: transform var(--ut-dur-fast) var(--ut-ease-forward); }
a.link-forward:hover > span:first-child, .entry-card:hover .link-forward > span:first-child { text-decoration: underline; text-underline-offset: 0.2em; }
a.link-forward:hover .icon--forward { transform: translate(2px, -2px); }
[dir="rtl"] .link-forward .icon--forward { transform: scaleX(-1); }
[dir="rtl"] a.link-forward:hover .icon--forward { transform: scaleX(-1) translate(2px, -2px); }

/* ------------------------------------------------------------------ banners */

.skip-link {
  position: absolute;
  inset-inline-start: 16px;
  inset-block-start: -200px;
  z-index: 100;
  padding: 12px 16px;
  border-radius: 8px;
  background: var(--ut-navy);
  color: var(--ut-cloud);
  font-family: var(--font-head);
  font-weight: 500;
  text-decoration: none;
}
.skip-link:focus { inset-block-start: 12px; }

.announcement, .preview-banner { font-size: 0.875rem; line-height: 1.5; }
.announcement .container, .preview-banner .container { padding-block: 10px; text-align: center; }
.announcement a, .preview-banner a { color: var(--ut-lime); }
.preview-banner { border-block-end: 2px solid var(--ut-lime); }

/* ------------------------------------------------------------------ header */

.site-header {
  position: sticky;
  inset-block-start: 0;
  z-index: 40;
  background: var(--ut-bg);
  border-block-end: 1px solid var(--ut-line);
}
.header-inner {
  display: flex;
  align-items: center;
  gap: 16px;
  min-block-size: var(--header-h);
}

.brand { display: inline-flex; align-items: center; min-block-size: 44px; flex: none; }
/* E1: symbol below 360 px, compact 22 px to 639 px, horizontal 24 px, then 28 px from 1024 px. Never in viewport units. */
.brand img { block-size: 28px; inline-size: auto; }
@media (min-width: 360px) { .brand img { block-size: 22px; } }
@media (min-width: 640px) { .brand img { block-size: 24px; } }
@media (min-width: 1024px) { .brand img { block-size: 28px; } }

.primary-nav { display: none; }
.nav-list { list-style: none; margin: 0; padding: 0; }
.nav-list a {
  display: flex;
  align-items: center;
  min-block-size: 44px;
  padding-inline: 12px;
  border-radius: 6px;
  font-family: var(--font-head);
  font-weight: 500;
  font-size: 0.9375rem;
  color: var(--ut-textSecondary);
  text-decoration: none;
}
:lang(ar) .nav-list a { font-size: 1.0625rem; }
.nav-list a:hover { color: var(--ut-text); background: color-mix(in srgb, var(--ut-navy) 5%, transparent); }
.nav-list a[aria-current="page"] {
  color: var(--ut-text);
  text-decoration: underline;
  text-decoration-color: var(--ut-accent);
  text-decoration-thickness: 2px;
  text-underline-offset: 8px;
}

/* Mobile menu, opened by site.js. */
.primary-nav.is-open {
  display: block;
  position: absolute;
  inset-inline: 0;
  inset-block-start: 100%;
  max-block-size: calc(100vh - var(--header-h));
  overflow-y: auto;
  padding: 8px var(--gutter) 20px;
  background: var(--ut-surface);
  border-block-end: 1px solid var(--ut-line);
  box-shadow: 0 18px 32px -24px color-mix(in srgb, var(--ut-navy) 55%, transparent);
}
.primary-nav.is-open .nav-list { display: grid; gap: 2px; }
.primary-nav.is-open .nav-list a { font-size: 1.0625rem; padding-inline: 8px; }
.nav-cta { margin-block-start: 12px; inline-size: 100%; }

.header-actions { display: flex; align-items: center; gap: 4px; margin-inline-start: auto; }

.lang-switch {
  display: inline-flex;
  align-items: center;
  min-block-size: 44px;
  padding-inline: 10px;
  border-radius: 6px;
  font-family: var(--font-head);
  font-weight: 500;
  font-size: 0.9375rem;
  color: var(--ut-textSecondary);
  text-decoration: none;
}
.lang-switch:hover { color: var(--ut-text); text-decoration: underline; }
/* The Arabic label on English pages uses the system Arabic font, so English pages never download Plex Arabic. */
.lang-switch:lang(ar) { font-family: system-ui, "Geeza Pro", "Segoe UI", Tahoma, sans-serif; font-size: 1rem; }
.lang-switch:lang(en) { font-family: "Space Grotesk", "Inter", system-ui, sans-serif; }

.header-cta { display: none; }
@media (min-width: 640px) {
  .header-cta { display: inline-flex; min-block-size: 44px; padding-block: 10px; }
}

.nav-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-block-size: 44px;
  min-inline-size: 44px;
  padding-inline: 10px;
  border: 1px solid var(--ut-line);
  border-radius: 8px;
  background: var(--ut-surface);
  color: var(--ut-text);
  font-family: var(--font-head);
  font-weight: 500;
  font-size: 0.9375rem;
  text-decoration: none;
  cursor: pointer;
}
.nav-toggle .icon { inline-size: 20px; block-size: 20px; }
.nav-toggle .nav-toggle-close { display: none; }
.nav-toggle[aria-expanded="true"] .nav-toggle-close { display: inline-block; }
.nav-toggle[aria-expanded="true"] .nav-toggle-open { display: none; }
@media (max-width: 479.98px) {
  .nav-toggle-label {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }
}

/* The full navigation needs about 1100 px with every section shown; below that it lives in the menu. */
@media (min-width: 1180px) {
  .header-inner { gap: 24px; }
  .primary-nav,
  .primary-nav.is-open {
    display: flex;
    position: static;
    flex: 1;
    align-items: center;
    padding: 0;
    max-block-size: none;
    overflow: visible;
    background: none;
    border: 0;
    box-shadow: none;
  }
  .nav-list, .primary-nav.is-open .nav-list { display: flex; gap: 2px; }
  .primary-nav.is-open .nav-list a { font-size: 0.9375rem; padding-inline: 12px; }
  .nav-cta { display: none; }
  .nav-toggle { display: none; }
  .header-actions { margin-inline-start: 0; gap: 12px; }
}

/* ------------------------------------------------------------------ sections */

.section { padding-block: 56px; }
@media (min-width: 1024px) { .section { padding-block: 88px; } }
.section--surface { background: var(--ut-surface); border-block: 1px solid var(--ut-line); }
.section--tight { padding-block: 40px; }
@media (min-width: 1024px) { .section--tight { padding-block: 56px; } }
.section--flush-top { padding-block-start: 40px; }
@media (min-width: 1024px) { .section--flush-top { padding-block-start: 56px; } }
.section--surface + .section--surface { border-block-start-width: 0; }

.section-head { display: grid; gap: 12px; margin-block-end: 32px; }
.section-head-main { display: grid; gap: 12px; }
.section-intro { color: var(--ut-textSecondary); max-inline-size: 60ch; }
@media (min-width: 1024px) {
  .section-head { margin-block-end: 40px; }
  .section-head--split { grid-template-columns: minmax(0, 1fr) minmax(0, 46ch); align-items: end; gap: 40px; }
}

.grid { display: grid; gap: var(--grid-gap); }
@media (min-width: 640px) {
  .grid--2, .grid--3, .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
  .grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.card {
  display: grid;
  align-content: start;
  gap: 12px;
  padding: 24px;
  background: var(--ut-surface);
  border: 1px solid var(--ut-line);
  border-radius: var(--radius-card);
}
.card-icon { inline-size: 24px; block-size: 24px; color: var(--ut-textSecondary); }
.card-title { font-size: 1.25rem; }
.card-body { color: var(--ut-textSecondary); font-size: 0.9375rem; line-height: 1.6; }
:lang(ar) .card-body { font-size: 1.0625rem; line-height: 1.8; }

/* Forward cut on the leading top corner. */
.cut {
  clip-path: polygon(0 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% 100%, 0 100%);
  border-start-end-radius: 0 !important;
}
[dir="rtl"] .cut { clip-path: polygon(var(--cut) 0, 100% 0, 100% 100%, 0 100%, 0 var(--cut)); }
.cut--lg { --cut: var(--cut-lg); }

/* ------------------------------------------------------------------ hero */

.hero { padding-block: 40px 56px; }
@media (min-width: 1024px) { .hero { padding-block: 72px 88px; } }
.hero-grid { display: grid; gap: 40px; align-items: center; }
@media (min-width: 1024px) { .hero-grid { grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: 56px; } }
.hero-copy { display: grid; gap: 24px; justify-items: start; }
.hero-copy > .btn-row { inline-size: 100%; }
.hero-points { list-style: none; padding: 0; display: grid; gap: 10px; }
.hero-points li { display: flex; align-items: flex-start; gap: 10px; color: var(--ut-textSecondary); font-size: 0.9375rem; line-height: 1.5; }
:lang(ar) .hero-points li { font-size: 1.0625rem; line-height: 1.7; }
.hero-points .icon { inline-size: 20px; block-size: 20px; margin-block-start: 1px; color: var(--ut-accent); }
.hero-meta { font-size: 0.875rem; color: var(--ut-textMuted); }

.hero-art {
  position: relative;
  min-block-size: 260px;
  overflow: hidden;
  background: var(--ut-navy);
  border-radius: 14px;
}
@media (min-width: 640px) { .hero-art { min-block-size: 380px; } }
@media (min-width: 1024px) { .hero-art { min-block-size: 460px; } }
.plane { position: absolute; border-radius: 10px; }
.plane--lime { background: var(--ut-lime); inset-inline-start: 28%; inset-block-start: 16%; inline-size: 48%; block-size: 41%; }
.plane--raised { background: var(--ut-navyRaised); inset-inline-start: 11%; inset-block-start: 29%; inline-size: 56%; block-size: 50%; }

.art-card {
  display: none;
  position: absolute;
  inset-inline-start: 7%;
  inset-block-end: 7%;
  inline-size: min(320px, 62%);
  padding: 16px 18px;
  gap: 10px;
  background: var(--ut-white, #FFFFFF);
  color: var(--ut-navy);
  border: 1px solid var(--ut-cloudLine);
  border-radius: 12px;
  box-shadow: 0 18px 40px -18px color-mix(in srgb, var(--ut-navy) 85%, transparent);
}
@media (min-width: 640px) { .art-card { display: grid; } }
.art-card-title { font-family: var(--font-head); font-weight: 600; font-size: 0.9375rem; }
.art-rows { list-style: none; padding: 0; display: grid; gap: 8px; }
.art-rows li { display: grid; grid-template-columns: 24px auto 1fr; align-items: center; gap: 8px; font-size: 0.8125rem; color: var(--ut-slate); }
.art-num { font-family: var(--font-head); font-feature-settings: "tnum"; color: var(--ut-mist); }
.art-bar { block-size: 6px; border-radius: 3px; background: color-mix(in srgb, var(--ut-navy) 12%, var(--ut-white, #FFFFFF)); justify-self: end; }
.art-bar--1 { inline-size: 90%; background: var(--ut-navy); }
.art-bar--2 { inline-size: 64%; background: var(--ut-slate); }
.art-bar--3 { inline-size: 40%; }
.art-line { display: block; inline-size: 100%; block-size: auto; }
.art-line-path { stroke: var(--ut-slate); }
.art-line-now { fill: var(--ut-lime); stroke: var(--ut-navy); }
[dir="rtl"] .art-line { transform: scaleX(-1); }
.art-caption { font-size: 0.75rem; color: var(--ut-mist); }
.art-symbol { position: absolute; inset-inline-end: 6%; inset-block-end: 7%; inline-size: 64px; block-size: auto; }
@media (min-width: 1024px) { .art-symbol { inline-size: 92px; } }

/* Entrance: panels travel 10 px along the 45° axis while they fade in (E2). Once, on load. */
@keyframes utEnter {
  from { opacity: 0; transform: translate(calc(-10px * var(--dir)), 10px); }
  to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: no-preference) {
  .hero-copy > * { animation: utEnter 420ms var(--ut-ease-forward) both; }
  .hero-copy > :nth-child(2) { animation-delay: 60ms; }
  .hero-copy > :nth-child(3) { animation-delay: 120ms; }
  .hero-copy > :nth-child(n + 4) { animation-delay: 180ms; }
  .plane--raised { animation: utEnter 420ms 120ms var(--ut-ease-forward) both; }
  .plane--lime { animation: utEnter 560ms 220ms var(--ut-ease-forward) both; }
  .art-card { animation: utEnter 420ms 360ms var(--ut-ease-forward) both; }
}

/* ------------------------------------------------------------------ offers */

.offers { display: grid; gap: var(--grid-gap); }
@media (min-width: 768px) {
  .offers--2, .offers--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1100px) {
  .offers--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.offer {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
  padding: 28px 24px;
  background: var(--ut-surface);
  border: 1px solid var(--ut-line);
  border-radius: var(--radius-card);
}
@media (min-width: 1024px) { .offer { padding: 34px; } }
.section--surface .offer:not(.offer--lead) { background: var(--ut-bg); }
.offer--lead { background: var(--ut-navy); border-color: var(--ut-navy); }
.offer-icon { inline-size: 28px; block-size: 28px; color: var(--ut-accent); }
.offer-title { font-size: 1.5rem; line-height: 1.2; }
@media (min-width: 1024px) { .offer-title { font-size: 1.75rem; } }
.offer-summary { color: var(--ut-textSecondary); }
.offer-note { font-size: 0.875rem; color: var(--ut-textMuted); line-height: 1.55; }
.offer .link-forward { margin-block-start: auto; }

.pills { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--ut-text) 6%, var(--ut-surface));
  color: var(--ut-textSecondary);
  font-family: var(--font-head);
  font-weight: 500;
  font-size: 0.8125rem;
  line-height: 1.25;
}
:lang(ar) .pill { font-size: 0.9375rem; }
.pill--strong { color: var(--ut-text); font-weight: 600; }
/* A 30% lime tint behind navy text is allowed on light grounds; on navy the pill uses lime outright. */
.pill--accent { background: color-mix(in srgb, var(--ut-lime) 30%, var(--ut-surface)); color: var(--ut-navy); }
.ut-dark .pill--accent { background: var(--ut-lime); color: var(--ut-navy); }

/* ------------------------------------------------------------------ process */

.progress-line { display: none; inline-size: 100%; block-size: auto; margin-block-end: 20px; }
@media (min-width: 640px) { .progress-line { display: block; } }
[dir="rtl"] .progress-line { transform: scaleX(-1); }
.progress-track { stroke: var(--ut-line); }
.progress-done { stroke: var(--ut-text); }
.progress-now { fill: var(--ut-lime); stroke: var(--ut-navy); }

.steps { list-style: none; padding: 0; display: grid; gap: 28px; }
@media (min-width: 640px) { .steps { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); } }
.step { display: grid; align-content: start; gap: 8px; }
.step-num { font-family: var(--font-head); font-weight: 500; font-size: 0.8125rem; font-feature-settings: "tnum"; color: var(--ut-textMuted); }
.step-title { font-size: 1.375rem; }
.step-body { color: var(--ut-textSecondary); font-size: 0.9375rem; line-height: 1.6; max-inline-size: 42ch; }
:lang(ar) .step-body { font-size: 1.0625rem; line-height: 1.8; }

/* ------------------------------------------------------------------ why */

.why-list { list-style: none; padding: 0; display: grid; gap: 28px; }
@media (min-width: 640px) { .why-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .why-list { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.why-item { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 14px; row-gap: 6px; align-content: start; }
.why-item .icon { grid-row: span 2; inline-size: 22px; block-size: 22px; margin-block-start: 2px; color: var(--ut-accent); }
.why-title { font-size: 1.125rem; line-height: 1.35; }
.why-body { color: var(--ut-textSecondary); font-size: 0.9375rem; line-height: 1.6; }
:lang(ar) .why-body { font-size: 1.0625rem; line-height: 1.8; }

/* ------------------------------------------------------------------ partner band */

.band { display: grid; gap: 16px; align-items: center; }
@media (min-width: 768px) { .band { grid-template-columns: minmax(0, 1fr) auto; gap: 40px; } }
.band-copy { display: grid; gap: 8px; }
.band-title { font-size: 1.5rem; line-height: 1.2; }
.band-body { color: var(--ut-textSecondary); max-inline-size: 64ch; }

/* ------------------------------------------------------------------ FAQs */

.faq-layout { display: grid; gap: 8px; }
@media (min-width: 1024px) {
  .faq-layout { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.6fr); gap: 56px; align-items: start; }
  .faq-layout .section-head { margin-block-end: 0; }
}
.faq-list { border-block-start: 1px solid var(--ut-line); }
.faq { border-block-end: 1px solid var(--ut-line); }
.faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-block-size: 56px;
  padding-block: 14px;
  cursor: pointer;
  list-style: none;
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 1.0625rem;
  line-height: 1.4;
  color: var(--ut-text);
}
:lang(ar) .faq summary { font-size: 1.1875rem; line-height: 1.6; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover .faq-q { text-decoration: underline; text-underline-offset: 0.2em; }
.faq-icon { inline-size: 20px; block-size: 20px; color: var(--ut-textSecondary); transition: transform var(--ut-dur-base) var(--ut-ease-forward); }
.faq[open] .faq-icon { transform: rotate(45deg); }
.faq-answer { padding-block-end: 20px; }

/* ------------------------------------------------------------------ closing call to action */

.section--cta { padding-block-end: 64px; }
@media (min-width: 1024px) { .section--cta { padding-block-end: 96px; } }
.cta-panel {
  display: grid;
  gap: 28px;
  padding: 36px 24px;
  border-radius: 14px;
}
@media (min-width: 1024px) {
  .cta-panel { grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr); align-items: center; gap: 56px; padding: 64px; }
}
.cta-copy { display: grid; gap: 14px; }
.cta-body { color: var(--ut-textSecondary); font-size: 1.0625rem; max-inline-size: 56ch; }
:lang(ar) .cta-body { font-size: 1.1875rem; line-height: 1.8; }
.cta-actions { display: grid; gap: 14px; }
.cta-note { color: var(--ut-textMuted); font-size: 0.875rem; }

/* ------------------------------------------------------------------ inner pages */

.page-hero { padding-block: 32px 40px; }
@media (min-width: 1024px) { .page-hero { padding-block: 56px 64px; } }
.page-hero-inner { display: grid; gap: 18px; justify-items: start; }
.page-hero-inner > .btn-row { inline-size: 100%; }
.page-hero-icon { inline-size: 32px; block-size: 32px; color: var(--ut-accent); }

.breadcrumbs ol { list-style: none; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 2px 8px; font-size: 0.875rem; color: var(--ut-textMuted); }
.breadcrumbs li { display: inline-flex; align-items: center; gap: 8px; }
.breadcrumbs li + li::before { content: "/" / ""; color: var(--ut-textMuted); }
.breadcrumbs a { display: inline-flex; align-items: center; min-block-size: 32px; color: var(--ut-textSecondary); }

.content-layout { display: grid; gap: 32px; max-inline-size: calc(780px + 2 * var(--gutter)); margin-inline: 0; }
.content-block { display: grid; gap: 14px; align-content: start; }
.content-block > p { color: var(--ut-textSecondary); max-inline-size: 70ch; }
.content-image { border-radius: var(--radius-card); inline-size: 100%; }

.service-layout { display: grid; gap: 40px; }
@media (min-width: 1024px) {
  .service-layout { grid-template-columns: minmax(0, 1fr) 340px; gap: 64px; align-items: start; }
  .service-aside { position: sticky; inset-block-start: calc(var(--header-h) + 24px); }
}
.service-main { display: grid; gap: 44px; align-content: start; }
.scope { display: grid; gap: 32px; }
@media (min-width: 640px) { .scope { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.aside-card { gap: 18px; padding: 24px; background: var(--ut-bg); }
.aside-note { color: var(--ut-textMuted); font-size: 0.875rem; line-height: 1.55; }

.facts { display: grid; gap: 16px; }
.facts dt { font-family: var(--font-head); font-weight: 500; font-size: 0.75rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ut-textMuted); }
:lang(ar) .facts dt { letter-spacing: 0; text-transform: none; font-size: 0.9375rem; }
.facts dd { margin: 4px 0 0; font-family: var(--font-head); font-weight: 600; font-size: 1.25rem; line-height: 1.3; color: var(--ut-text); }
.facts .places {
  display: block;
  inline-size: fit-content;
  margin-block-start: 8px;
  padding: 4px 10px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--ut-lime) 30%, var(--ut-surface));
  color: var(--ut-navy);
  font-size: 0.8125rem;
  font-weight: 500;
}
.facts--inline { display: flex; flex-wrap: wrap; gap: 16px 32px; }
.facts--inline dd { font-size: 1rem; }

.check-list { list-style: none; padding: 0; display: grid; gap: 12px; }
.check-list li { display: flex; align-items: flex-start; gap: 12px; color: var(--ut-textSecondary); line-height: 1.55; }
.check-list .icon { inline-size: 20px; block-size: 20px; margin-block-start: 2px; }
.check-list--yes .icon { color: var(--ut-accent); }
.check-list--no .icon { color: var(--ut-textMuted); }
.check-list--neutral .icon { color: var(--ut-textSecondary); }

.other-list { list-style: none; padding: 0; display: grid; gap: 12px; margin-block-start: 12px; }
.other-list p { color: var(--ut-textSecondary); font-size: 0.9375rem; max-inline-size: 70ch; }

/* ------------------------------------------------------------------ markdown */

.prose { color: var(--ut-textSecondary); max-inline-size: 72ch; }
.prose > * + * { margin-block-start: 1em; }
.prose h2, .prose h3, .prose h4 { color: var(--ut-text); }
.prose h2 { font-size: 1.5rem; line-height: 1.25; margin-block-start: 1.8em; }
.prose h3 { font-size: 1.25rem; margin-block-start: 1.5em; }
.prose h4 { font-size: 1.0625rem; margin-block-start: 1.4em; }
.prose > :first-child { margin-block-start: 0; }
.prose :is(h2, h3, h4) + * { margin-block-start: 0.6em; }
.prose ul, .prose ol { padding-inline-start: 1.35em; }
.prose li + li { margin-block-start: 0.45em; }
.prose li::marker { color: var(--ut-textMuted); }
.prose strong { color: var(--ut-text); font-weight: 600; }
.prose code { font-size: 0.9em; padding: 0.1em 0.35em; border-radius: 4px; background: color-mix(in srgb, var(--ut-navy) 6%, var(--ut-surface)); }
.prose pre { overflow-x: auto; padding: 16px; border-radius: 10px; background: var(--ut-navy); color: var(--ut-slateSoft); direction: ltr; text-align: left; }
.prose pre code { padding: 0; background: none; color: inherit; }
.prose blockquote { padding-inline-start: 16px; border-inline-start: 3px solid var(--ut-accent); color: var(--ut-text); }
.prose hr { border: 0; border-block-start: 1px solid var(--ut-line); }
.prose img { border-radius: 10px; }
.prose table { display: block; overflow-x: auto; border-collapse: collapse; font-size: 0.9375rem; }
.prose th, .prose td { padding: 8px 12px; border-block-end: 1px solid var(--ut-line); text-align: start; }
.prose th { font-family: var(--font-head); font-weight: 500; color: var(--ut-text); }
.prose em:only-child { color: var(--ut-textMuted); font-style: normal; font-size: 0.875rem; }
:lang(ar) .prose em { font-style: normal; }

/* ------------------------------------------------------------------ cards for case studies and articles */

.entry-card {
  position: relative;
  display: grid;
  align-content: start;
  overflow: hidden;
  background: var(--ut-surface);
  border: 1px solid var(--ut-line);
  border-radius: var(--radius-card);
}
.section--surface .entry-card { background: var(--ut-bg); }
.entry-card:hover { border-color: var(--ut-textSecondary); }
.entry-image { inline-size: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.entry-body { display: grid; gap: 10px; padding: 22px 24px 18px; }
.entry-meta { font-size: 0.8125rem; color: var(--ut-textMuted); }
.entry-title { font-size: 1.25rem; line-height: 1.3; }
.entry-title a { color: var(--ut-text); text-decoration: none; }
.entry-title a::after { content: ""; position: absolute; inset: 0; border-radius: var(--radius-card); }
.entry-title a:focus-visible { outline: none; }
.entry-title a:focus-visible::after { outline: 2px solid var(--ut-focus); outline-offset: -2px; }
.entry-summary { color: var(--ut-textSecondary); font-size: 0.9375rem; }

.metrics-block { display: grid; gap: 16px; }
.metrics { list-style: none; padding: 0; display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
.metrics li { display: grid; gap: 6px; padding: 18px 20px; background: var(--ut-bg); border: 1px solid var(--ut-line); border-radius: 10px; }
.metric-value { font-family: var(--ut-font-text); font-weight: 600; font-size: 2rem; line-height: 1.05; font-variant-numeric: tabular-nums; color: var(--ut-text); }
.metric-label { font-size: 0.875rem; color: var(--ut-textSecondary); }

.quote { display: grid; gap: 16px; padding: 24px; background: var(--ut-surface); border: 1px solid var(--ut-line); border-radius: var(--radius-card); }
.section--surface .quote { background: var(--ut-bg); }
.quote blockquote { font-size: 1.0625rem; color: var(--ut-text); }
.quote figcaption { display: grid; gap: 2px; font-size: 0.875rem; color: var(--ut-textMuted); }
.quote-name { color: var(--ut-text); font-weight: 600; }

/* ------------------------------------------------------------------ contact */

.contact-section { padding-block-start: 40px; }
@media (min-width: 1024px) { .contact-section { padding-block-start: 64px; } }
.contact-grid { display: grid; gap: 40px; }
@media (min-width: 1024px) { .contact-grid { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: 64px; align-items: start; } }
.contact-intro { display: grid; gap: 20px; align-content: start; }
.contact-response { color: var(--ut-textMuted); font-size: 0.9375rem; }
.channels, .next { display: grid; gap: 14px; margin-block-start: 12px; }
.channels .block-title, .next .block-title, .contact-card > .block-title { font-size: 1.125rem; }

.channel-list { list-style: none; padding: 0; display: grid; gap: 10px; }
.channel {
  display: flex;
  align-items: center;
  gap: 12px;
  min-block-size: 56px;
  padding: 12px 16px;
  border: 1px solid var(--ut-line);
  border-radius: 10px;
  background: var(--ut-surface);
  color: var(--ut-text);
  font-family: var(--font-head);
  font-weight: 500;
  text-decoration: none;
}
.channel:hover { border-color: var(--ut-textSecondary); }
.channel .icon { color: var(--ut-accent); }
.channel .channel-arrow { margin-inline-start: auto; color: var(--ut-textMuted); }

.next-steps { list-style: none; padding: 0; display: grid; gap: 14px; counter-reset: next; }
.next-steps li { display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: 10px; color: var(--ut-textSecondary); }
.next-steps li::before {
  counter-increment: next;
  content: counter(next, decimal-leading-zero);
  font-family: var(--ut-font-display);
  font-weight: 500;
  font-size: 0.8125rem;
  line-height: 2;
  font-feature-settings: "tnum";
  color: var(--ut-textMuted);
}

.contact-card { gap: 20px; padding: 20px 16px; }
@media (min-width: 480px) { .contact-card { padding: 28px 24px; } }
@media (min-width: 1024px) { .contact-card { padding: 36px; } }

.form { display: grid; gap: 22px; }
.form-row { display: grid; gap: 22px; }
@media (min-width: 640px) { .form-row--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.field { display: grid; gap: 6px; align-content: start; min-inline-size: 0; }
fieldset.field { margin: 0; padding: 0; border: 0; }
.field-label { font-family: var(--font-head); font-weight: 500; font-size: 0.9375rem; line-height: 1.35; color: var(--ut-text); padding: 0; }
:lang(ar) .field-label { font-size: 1.0625rem; }
legend.field-label { margin-block-end: 6px; }
.optional { color: var(--ut-textMuted); font-weight: 400; }
.field-hint { font-size: 0.8125rem; line-height: 1.45; color: var(--ut-textMuted); }

.input {
  inline-size: 100%;
  min-block-size: 48px;
  padding: 11px 14px;
  /* Mist on white is 4.8:1, above the 3:1 needed for a control's boundary. */
  border: 1px solid var(--ut-mist);
  border-radius: 8px;
  background: var(--ut-surface);
  color: var(--ut-text);
  font: inherit;
  font-size: 1rem;
  line-height: 1.4;
}
:lang(ar) .input { font-size: 1.0625rem; }
textarea.input { min-block-size: 132px; resize: vertical; }
select.input { padding-inline-end: 36px; cursor: pointer; }
.input::placeholder { color: var(--ut-textMuted); opacity: 1; }
.input:hover { border-color: var(--ut-slate); }
.input:focus-visible { outline: 2px solid var(--ut-focus); outline-offset: 1px; border-color: var(--ut-navy); border-radius: 8px; }
.input[aria-invalid="true"] { border-color: var(--ut-critical); box-shadow: inset 0 0 0 1px var(--ut-critical); }

.field-error { display: flex; align-items: flex-start; gap: 6px; color: var(--ut-critical); font-size: 0.875rem; font-weight: 500; line-height: 1.45; }
.field-error .icon { inline-size: 16px; block-size: 16px; margin-block-start: 2px; }

.choices { display: flex; flex-wrap: wrap; gap: 8px; }
.choice {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-block-size: 44px;
  padding: 8px 14px;
  border: 1px solid var(--ut-mist);
  border-radius: 8px;
  background: var(--ut-surface);
  cursor: pointer;
  font-size: 0.9375rem;
}
.choice input { inline-size: 18px; block-size: 18px; margin: 0; accent-color: var(--ut-navy); }
.choice:has(input:checked) { border-color: var(--ut-navy); box-shadow: inset 0 0 0 1px var(--ut-navy); }
.choice:has(input:focus-visible) { outline: 2px solid var(--ut-focus); outline-offset: 2px; }
.choice input:focus-visible { outline: none; }

.consent { display: flex; align-items: flex-start; gap: 12px; min-block-size: 44px; color: var(--ut-textSecondary); font-size: 0.9375rem; line-height: 1.55; cursor: pointer; }
.consent input { inline-size: 22px; block-size: 22px; margin: 2px 0 0; flex: none; accent-color: var(--ut-navy); }

/* Honeypot: off-screen, not display:none, so simple bots still see and fill it. */
.hp { position: absolute; inset-inline-start: -10000px; inline-size: 1px; block-size: 1px; overflow: hidden; }

.error-summary {
  display: grid;
  gap: 10px;
  padding: 16px 20px;
  border: 2px solid var(--ut-critical);
  border-radius: 10px;
  background: color-mix(in srgb, var(--ut-critical) 5%, var(--ut-surface));
}
.error-summary:focus-visible { outline: 2px solid var(--ut-focus); outline-offset: 3px; }
.error-summary-title { display: flex; align-items: center; gap: 8px; font-size: 1.0625rem; color: var(--ut-text); }
.error-summary-title .icon { color: var(--ut-critical); }
.error-summary ul { padding-inline-start: 1.2em; display: grid; gap: 4px; }
.error-summary a { color: var(--ut-critical); font-weight: 500; }

/* Turnstile's normal widget is 300 px wide; scale it down on the narrowest phones so nothing overflows. */
.turnstile-wrap { overflow: hidden; min-block-size: 65px; }
@media (max-width: 379.98px) {
  .cf-turnstile { transform: scale(0.86); transform-origin: top left; }
  [dir="rtl"] .cf-turnstile { transform-origin: top right; }
}

.form-footer { display: grid; gap: 12px; justify-items: start; }
.btn--submit { min-inline-size: 200px; }
@media (max-width: 479.98px) { .btn--submit { inline-size: 100%; } }
.form-note { font-size: 0.8125rem; color: var(--ut-textMuted); line-height: 1.5; }

.thanks-icon { inline-size: 40px; block-size: 40px; color: var(--ut-accent); margin-block-end: 16px; }
.page-thanks .narrow, .error-page .narrow { display: grid; gap: 20px; justify-items: start; }
.error-page { padding-block: 72px 96px; }

/* ------------------------------------------------------------------ footer */

.site-footer { padding-block: 48px 32px; }
.footer-grid { display: grid; gap: 32px; }
@media (min-width: 640px) { .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .footer-grid { grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr)); gap: 40px; } }
.footer-brand { display: grid; gap: 14px; align-content: start; }
.footer-logo { display: inline-flex; align-items: center; min-block-size: 44px; justify-self: start; }
.footer-logo img { block-size: 26px; inline-size: auto; }
.footer-tagline { font-family: var(--font-head); font-weight: 600; font-size: 1.125rem; line-height: 1.35; color: var(--ut-text); }
.footer-meta { color: var(--ut-textSecondary); font-size: 0.875rem; }
.footer-col { display: grid; gap: 24px; align-content: start; }
.footer-col ul, .footer-col nav ul { list-style: none; padding: 0; display: grid; }
.footer-heading {
  margin-block-end: 4px;
  font-family: var(--font-head);
  font-weight: 500;
  font-size: 0.75rem;
  line-height: 1.3;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ut-textMuted);
}
:lang(ar) .footer-heading { letter-spacing: 0; text-transform: none; font-size: 0.9375rem; }
.footer-col a { display: inline-flex; align-items: center; min-block-size: 44px; color: var(--ut-textSecondary); text-decoration: none; font-size: 0.9375rem; }
.footer-col a:hover { color: var(--ut-text); text-decoration: underline; }
.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px 24px;
  margin-block-start: 32px;
  padding-block-start: 18px;
  border-block-start: 1px solid var(--ut-line);
  color: var(--ut-textMuted);
  font-size: 0.8125rem;
}

/* ------------------------------------------------------------------ WhatsApp button on phones */

.wa-float {
  position: fixed;
  inset-inline-end: 16px;
  inset-block-end: 16px;
  z-index: 30;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-block-size: 52px;
  padding-inline: 18px;
  border-radius: 999px;
  background: var(--ut-navy);
  color: var(--ut-cloud);
  font-family: var(--font-head);
  font-weight: 500;
  font-size: 0.9375rem;
  text-decoration: none;
  box-shadow: 0 12px 28px -12px color-mix(in srgb, var(--ut-navy) 70%, transparent);
}
.wa-float .icon { color: var(--ut-lime); }
.wa-float:hover { background: var(--ut-slate); }
.has-wa-float .site-footer { padding-block-end: 96px; }
@media (min-width: 1024px) {
  .wa-float { display: none; }
  .has-wa-float .site-footer { padding-block-end: 32px; }
}

/* ------------------------------------------------------------------ motion and print */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

@media print {
  .site-header, .wa-float, .skip-link, .nav-toggle, .cta-panel, .hero-art, .announcement, .preview-banner { display: none !important; }
  body { background: #FFFFFF; color: #111827; }
  .ut-dark { background: #FFFFFF; color: #111827; }
}