*, ::before, ::after {
  --tw-border-spacing-x: 0;
  --tw-border-spacing-y: 0;
  --tw-translate-x: 0;
  --tw-translate-y: 0;
  --tw-rotate: 0;
  --tw-skew-x: 0;
  --tw-skew-y: 0;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  --tw-pan-x:  ;
  --tw-pan-y:  ;
  --tw-pinch-zoom:  ;
  --tw-scroll-snap-strictness: proximity;
  --tw-gradient-from-position:  ;
  --tw-gradient-via-position:  ;
  --tw-gradient-to-position:  ;
  --tw-ordinal:  ;
  --tw-slashed-zero:  ;
  --tw-numeric-figure:  ;
  --tw-numeric-spacing:  ;
  --tw-numeric-fraction:  ;
  --tw-ring-inset:  ;
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: rgb(59 130 246 / 0.5);
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  --tw-blur:  ;
  --tw-brightness:  ;
  --tw-contrast:  ;
  --tw-grayscale:  ;
  --tw-hue-rotate:  ;
  --tw-invert:  ;
  --tw-saturate:  ;
  --tw-sepia:  ;
  --tw-drop-shadow:  ;
  --tw-backdrop-blur:  ;
  --tw-backdrop-brightness:  ;
  --tw-backdrop-contrast:  ;
  --tw-backdrop-grayscale:  ;
  --tw-backdrop-hue-rotate:  ;
  --tw-backdrop-invert:  ;
  --tw-backdrop-opacity:  ;
  --tw-backdrop-saturate:  ;
  --tw-backdrop-sepia:  ;
  --tw-contain-size:  ;
  --tw-contain-layout:  ;
  --tw-contain-paint:  ;
  --tw-contain-style:  ;
}

::backdrop {
  --tw-border-spacing-x: 0;
  --tw-border-spacing-y: 0;
  --tw-translate-x: 0;
  --tw-translate-y: 0;
  --tw-rotate: 0;
  --tw-skew-x: 0;
  --tw-skew-y: 0;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  --tw-pan-x:  ;
  --tw-pan-y:  ;
  --tw-pinch-zoom:  ;
  --tw-scroll-snap-strictness: proximity;
  --tw-gradient-from-position:  ;
  --tw-gradient-via-position:  ;
  --tw-gradient-to-position:  ;
  --tw-ordinal:  ;
  --tw-slashed-zero:  ;
  --tw-numeric-figure:  ;
  --tw-numeric-spacing:  ;
  --tw-numeric-fraction:  ;
  --tw-ring-inset:  ;
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: rgb(59 130 246 / 0.5);
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  --tw-blur:  ;
  --tw-brightness:  ;
  --tw-contrast:  ;
  --tw-grayscale:  ;
  --tw-hue-rotate:  ;
  --tw-invert:  ;
  --tw-saturate:  ;
  --tw-sepia:  ;
  --tw-drop-shadow:  ;
  --tw-backdrop-blur:  ;
  --tw-backdrop-brightness:  ;
  --tw-backdrop-contrast:  ;
  --tw-backdrop-grayscale:  ;
  --tw-backdrop-hue-rotate:  ;
  --tw-backdrop-invert:  ;
  --tw-backdrop-opacity:  ;
  --tw-backdrop-saturate:  ;
  --tw-backdrop-sepia:  ;
  --tw-contain-size:  ;
  --tw-contain-layout:  ;
  --tw-contain-paint:  ;
  --tw-contain-style:  ;
}/*
! tailwindcss v3.4.19 | MIT License | https://tailwindcss.com
*//*
1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)
2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116)
*/

*,
::before,
::after {
  box-sizing: border-box; /* 1 */
  border-width: 0; /* 2 */
  border-style: solid; /* 2 */
  border-color: #e5e7eb; /* 2 */
}

::before,
::after {
  --tw-content: '';
}

/*
1. Use a consistent sensible line-height in all browsers.
2. Prevent adjustments of font size after orientation changes in iOS.
3. Use a more readable tab size.
4. Use the user's configured `sans` font-family by default.
5. Use the user's configured `sans` font-feature-settings by default.
6. Use the user's configured `sans` font-variation-settings by default.
7. Disable tap highlights on iOS
*/

html,
:host {
  line-height: 1.5; /* 1 */
  -webkit-text-size-adjust: 100%; /* 2 */
  -moz-tab-size: 4; /* 3 */
  -o-tab-size: 4;
     tab-size: 4; /* 3 */
  font-family: Inter, sans-serif; /* 4 */
  font-feature-settings: normal; /* 5 */
  font-variation-settings: normal; /* 6 */
  -webkit-tap-highlight-color: transparent; /* 7 */
}

/*
1. Remove the margin in all browsers.
2. Inherit line-height from `html` so users can set them as a class directly on the `html` element.
*/

body {
  margin: 0; /* 1 */
  line-height: inherit; /* 2 */
}

/*
1. Add the correct height in Firefox.
2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)
3. Ensure horizontal rules are visible by default.
*/

hr {
  height: 0; /* 1 */
  color: inherit; /* 2 */
  border-top-width: 1px; /* 3 */
}

/*
Add the correct text decoration in Chrome, Edge, and Safari.
*/

abbr:where([title]) {
  -webkit-text-decoration: underline dotted;
          text-decoration: underline dotted;
}

/*
Remove the default font size and weight for headings.
*/

h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: inherit;
  font-weight: inherit;
}

/*
Reset links to optimize for opt-in styling instead of opt-out.
*/

a {
  color: inherit;
  text-decoration: inherit;
}

/*
Add the correct font weight in Edge and Safari.
*/

b,
strong {
  font-weight: bolder;
}

/*
1. Use the user's configured `mono` font-family by default.
2. Use the user's configured `mono` font-feature-settings by default.
3. Use the user's configured `mono` font-variation-settings by default.
4. Correct the odd `em` font sizing in all browsers.
*/

code,
kbd,
samp,
pre {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; /* 1 */
  font-feature-settings: normal; /* 2 */
  font-variation-settings: normal; /* 3 */
  font-size: 1em; /* 4 */
}

/*
Add the correct font size in all browsers.
*/

small {
  font-size: 80%;
}

/*
Prevent `sub` and `sup` elements from affecting the line height in all browsers.
*/

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

/*
1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)
2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)
3. Remove gaps between table borders by default.
*/

table {
  text-indent: 0; /* 1 */
  border-color: inherit; /* 2 */
  border-collapse: collapse; /* 3 */
}

/*
1. Change the font styles in all browsers.
2. Remove the margin in Firefox and Safari.
3. Remove default padding in all browsers.
*/

button,
input,
optgroup,
select,
textarea {
  font-family: inherit; /* 1 */
  font-feature-settings: inherit; /* 1 */
  font-variation-settings: inherit; /* 1 */
  font-size: 100%; /* 1 */
  font-weight: inherit; /* 1 */
  line-height: inherit; /* 1 */
  letter-spacing: inherit; /* 1 */
  color: inherit; /* 1 */
  margin: 0; /* 2 */
  padding: 0; /* 3 */
}

/*
Remove the inheritance of text transform in Edge and Firefox.
*/

button,
select {
  text-transform: none;
}

/*
1. Correct the inability to style clickable types in iOS and Safari.
2. Remove default button styles.
*/

button,
input:where([type='button']),
input:where([type='reset']),
input:where([type='submit']) {
  -webkit-appearance: button; /* 1 */
  background-color: transparent; /* 2 */
  background-image: none; /* 2 */
}

/*
Use the modern Firefox focus style for all focusable elements.
*/

:-moz-focusring {
  outline: auto;
}

/*
Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737)
*/

:-moz-ui-invalid {
  box-shadow: none;
}

/*
Add the correct vertical alignment in Chrome and Firefox.
*/

progress {
  vertical-align: baseline;
}

/*
Correct the cursor style of increment and decrement buttons in Safari.
*/

::-webkit-inner-spin-button,
::-webkit-outer-spin-button {
  height: auto;
}

/*
1. Correct the odd appearance in Chrome and Safari.
2. Correct the outline style in Safari.
*/

[type='search'] {
  -webkit-appearance: textfield; /* 1 */
  outline-offset: -2px; /* 2 */
}

/*
Remove the inner padding in Chrome and Safari on macOS.
*/

::-webkit-search-decoration {
  -webkit-appearance: none;
}

/*
1. Correct the inability to style clickable types in iOS and Safari.
2. Change font properties to `inherit` in Safari.
*/

::-webkit-file-upload-button {
  -webkit-appearance: button; /* 1 */
  font: inherit; /* 2 */
}

/*
Add the correct display in Chrome and Safari.
*/

summary {
  display: list-item;
}

/*
Removes the default spacing and border for appropriate elements.
*/

blockquote,
dl,
dd,
h1,
h2,
h3,
h4,
h5,
h6,
hr,
figure,
p,
pre {
  margin: 0;
}

fieldset {
  margin: 0;
  padding: 0;
}

legend {
  padding: 0;
}

ol,
ul,
menu {
  list-style: none;
  margin: 0;
  padding: 0;
}

/*
Reset default styling for dialogs.
*/
dialog {
  padding: 0;
}

/*
Prevent resizing textareas horizontally by default.
*/

textarea {
  resize: vertical;
}

/*
1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300)
2. Set the default placeholder color to the user's configured gray 400 color.
*/

input::-moz-placeholder, textarea::-moz-placeholder {
  opacity: 1; /* 1 */
  color: #9ca3af; /* 2 */
}

input::placeholder,
textarea::placeholder {
  opacity: 1; /* 1 */
  color: #9ca3af; /* 2 */
}

/*
Set the default cursor for buttons.
*/

button,
[role="button"] {
  cursor: pointer;
}

/*
Make sure disabled buttons don't get the pointer cursor.
*/
:disabled {
  cursor: default;
}

/*
1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14)
2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210)
   This can trigger a poorly considered lint error in some tools but is included by design.
*/

img,
svg,
video,
canvas,
audio,
iframe,
embed,
object {
  display: block; /* 1 */
  vertical-align: middle; /* 2 */
}

/*
Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14)
*/

img,
video {
  max-width: 100%;
  height: auto;
}

/* Make elements with the HTML hidden attribute stay hidden by default */
[hidden]:where(:not([hidden="until-found"])) {
  display: none;
}
.container {
  width: 100%;
}
@media (min-width: 640px) {

  .container {
    max-width: 640px;
  }
}
@media (min-width: 768px) {

  .container {
    max-width: 768px;
  }
}
@media (min-width: 1024px) {

  .container {
    max-width: 1024px;
  }
}
@media (min-width: 1280px) {

  .container {
    max-width: 1280px;
  }
}
@media (min-width: 1536px) {

  .container {
    max-width: 1536px;
  }
}
.block {
  display: block;
}
.grid {
  display: grid;
}
.hidden {
  display: none;
}
.transform {
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.shadow {
  --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.ring {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}
.invert {
  --tw-invert: invert(100%);
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.filter {
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.ease-in-out {
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

:root{
  --teal:#00BBB4;
  --teal-dark:#00958f;
  --navy:#00567D;
  --navy-deep:#003c58;
  --sky:#3CB4E5;
  --orange:#FA6C0E;
  --green:#93D500;
  --grey:#8C9091;
  --ink:#132B32;
  --bg:#FFFFFF;
  --bg-alt:#F5F9F9;
  --line: rgba(19,43,50,0.10);
  --radius: 2px;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:'Inter', sans-serif; font-size:16px; line-height:1.6;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
h1,h2,h3,.display{ font-family:'Archivo Expanded','Archivo',sans-serif; font-weight:800; letter-spacing:-0.01em; margin:0; color:var(--navy-deep); }
a{color:inherit;}
img,svg{display:block;max-width:100%;}
button{font-family:inherit;}
::-moz-selection{ background:var(--teal); color:#fff; }
::selection{ background:var(--teal); color:#fff; }
:focus-visible{ outline:3px solid var(--orange); outline-offset:3px; }

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

.wrap{ max-width:1180px; margin:0 auto; padding:0 32px; }

/* ---------- PAGE-LOAD CURTAIN ---------- */
#curtain{
  position:fixed; inset:0; z-index:999; background:var(--navy-deep);
  display:flex; align-items:center; justify-content:center;
  animation: curtainOut 0.9s cubic-bezier(.6,0,.2,1) forwards; animation-delay:.3s;
}
#curtain img{ height:32px; opacity:0; animation: curtainLogo .5s ease forwards .1s; filter:brightness(0) invert(1); }
@keyframes curtainLogo{ to{ opacity:1; } }
@keyframes curtainOut{ 0%{ clip-path:inset(0 0 0 0); } 100%{ clip-path:inset(0 0 100% 0); pointer-events:none; } }
@media (prefers-reduced-motion: reduce){ #curtain{ display:none; } }

/* ---------- NAV ---------- */
header{
  position:sticky; top:0; z-index:50; background:rgba(255,255,255,0.92);
  backdrop-filter:blur(10px); border-bottom:1px solid var(--line);
  transition:box-shadow .3s ease;
}
header.scrolled{ box-shadow:0 6px 24px rgba(0,40,50,0.06); }
.nav{ display:flex; align-items:center; justify-content:space-between; padding:14px 32px; max-width:1180px; margin:0 auto; }
.brandmark{ display:flex; align-items:center; text-decoration:none; }
.brandmark img{ height:38px; width:auto; transition:transform .3s ease; }
.brandmark:hover img{ transform:scale(1.03); }
nav.links{ display:flex; gap:34px; }
nav.links a{ text-decoration:none; color:var(--ink); font-weight:600; font-size:14.5px; position:relative; padding:4px 0; }
nav.links a::after{ content:""; position:absolute; left:0; bottom:-3px; width:0; height:2px; background:var(--teal); transition:width .25s ease; }
nav.links a:hover::after{ width:100%; }
.nav-cta{ background:var(--teal); color:#fff; text-decoration:none; padding:10px 22px; font-weight:700; font-size:13.5px; border-radius:var(--radius); transition:all .2s ease; }
.nav-cta:hover{ background:var(--navy); transform:translateY(-2px); box-shadow:0 8px 18px rgba(0,86,125,0.25); }
@media (max-width:860px){ nav.links{ display:none; } }

/* ---------- MOBILE NAV PANEL ---------- */
#mobileNavPanel{ background:#fff; border-bottom:1px solid var(--line); }
#mobileNavPanel a{ text-decoration:none; color:var(--navy-deep); font-family:'Archivo',sans-serif; font-weight:700; font-size:18px; }
#mobileNavToggle{ border:1.5px solid var(--line); border-radius:2px; padding:8px 16px; font-size:12.5px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; background:transparent; color:var(--navy-deep); }
@media (min-width:861px){ #mobileNavToggle{ display:none; } }

/* ---------- HERO (cinematic dark / bronze, scoped locally) ---------- */
.hero{
  /* Real Belhasa brand palette (from the official color guidelines) —
     Navy (#00567D) is their specified "deep section / contrast band"
     color, Teal (#00BBB4) is primary accent, Sky (#3CB4E5) is secondary
     accent. Layout/animation below is unchanged — colors only. */
  --h-navy:#00567D; --h-navy-deep:#003c58;
  --h-bronze:#00958f; --h-bronze-light:#00BBB4;
  --h-sky:#3CB4E5; --h-cream:#ffffff; --h-cream-dim:rgba(255,255,255,0.72);
  position:relative; min-height:92vh; display:flex; flex-direction:column;
  align-items:center; justify-content:center; text-align:center;
  padding:110px 0 60px; overflow:hidden;
  background:
    radial-gradient(ellipse 120% 80% at 50% 0%, #007a94 0%, transparent 60%),
    linear-gradient(180deg, var(--h-navy) 0%, var(--h-navy-deep) 100%);
}
.hero-grain{
  position:absolute; inset:0; z-index:1; pointer-events:none; opacity:0.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
#starSvg{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:min(90vmin,900px); height:min(90vmin,900px);
  z-index:2; opacity:0.9;
}
#starSvg polygon, #starSvg line{ stroke:var(--h-bronze-light); stroke-width:0.6; fill:none; }
.hero-bottom-fade{ position:absolute; left:0; right:0; bottom:0; height:180px; z-index:3; background:linear-gradient(180deg, transparent, #fff); pointer-events:none; }

.hero-content-grid{ position:relative; z-index:5; display:block; padding:0 5vw; }
.hero-copy{ max-width:680px; margin:0 auto; }

.hero .eyebrow{ display:inline-flex; align-items:center; gap:8px; font-size:12px; font-weight:600; letter-spacing:0.3em; text-transform:uppercase; color:var(--h-bronze-light); margin-bottom:22px; opacity:0; animation:fadeUp .7s ease forwards; animation-delay:.9s; }
.hero-serif{ font-family:'Fraunces',serif; font-weight:500; font-size:clamp(2.4rem,6vw,5.2rem); line-height:1.04; color:var(--h-cream); letter-spacing:-0.01em; opacity:0; animation:fadeUp .8s ease forwards; animation-delay:1.05s; }
.hero-serif em{ font-style:italic; font-weight:300; color:var(--h-bronze-light); }
.hero p.lead{ margin:26px auto 0; max-width:560px; font-size:clamp(15px,1.6vw,18px); color:var(--h-cream-dim); font-weight:300; line-height:1.7; opacity:0; animation:fadeUp .8s ease forwards; animation-delay:1.2s; }
.hero-actions{ display:flex; gap:16px; margin-top:38px; flex-wrap:wrap; justify-content:center; opacity:0; animation:fadeUp .8s ease forwards; animation-delay:1.35s; }
@keyframes fadeUp{ from{opacity:0; transform:translateY(16px);} to{opacity:1; transform:translateY(0);} }

.hero .btn-primary, .hero .btn-ghost{ display:inline-flex; align-items:center; gap:10px; padding:14px 30px; font-weight:600; font-size:13px; letter-spacing:0.08em; text-transform:uppercase; text-decoration:none; border-radius:2px; transition:all .3s ease; cursor:pointer; border:1px solid var(--h-bronze-light); }
.hero .btn-primary{ background:var(--h-bronze-light); color:var(--h-navy-deep); }
.hero .btn-primary:hover{ background:var(--h-sky); border-color:var(--h-sky); color:var(--h-navy-deep); transform:translateY(-2px); }
.hero .btn-ghost{ color:var(--h-cream); background:transparent; }
.hero .btn-ghost:hover{ background:var(--h-navy); color:var(--h-sky); border-color:var(--h-sky); transform:translateY(-2px); }

.hero-stats{ display:flex; gap:32px; margin-top:46px; flex-wrap:wrap; justify-content:center; opacity:0; animation:fadeUp .8s ease forwards; animation-delay:1.5s; }
.hero-stats div strong{ display:block; font-family:'Fraunces',serif; font-size:26px; font-weight:600; color:var(--h-bronze-light); }
.hero-stats div span{ font-size:11px; color:var(--h-cream-dim); letter-spacing:0.1em; text-transform:uppercase; }

.scroll-cue{ position:absolute; bottom:28px; left:50%; transform:translateX(-50%); font-size:11px; letter-spacing:0.2em; color:var(--h-cream-dim); display:flex; flex-direction:column; align-items:center; gap:10px; z-index:5; }
.scroll-cue .line{ width:1px; height:32px; background:linear-gradient(var(--h-bronze-light), transparent); animation:scrollPulse 2s ease-in-out infinite; }
@keyframes scrollPulse{ 0%,100%{opacity:.3;} 50%{opacity:1;} }

@media (max-width:900px){ .hero-stats{ gap:22px; } }

/* ---------- ENDORSEMENT STRIP ---------- */
.endorsement{
  position:relative; background:linear-gradient(120deg, var(--navy-deep), var(--navy), var(--teal-dark), var(--navy-deep));
  background-size:300% 100%; animation: gradientShift 12s ease infinite;
  color:#cfe6ee; padding:14px 0; text-align:center; font-size:12.5px; letter-spacing:0.18em; text-transform:uppercase; font-weight:700;
}
.endorsement span{ color:#fff; }
@keyframes gradientShift{ 0%{background-position:0% 50%;} 50%{background-position:100% 50%;} 100%{background-position:0% 50%;} }

/* ---------- SECTION HEADERS ---------- */
.section{ padding:92px 0; position:relative; }
.section-head{ max-width:640px; margin-bottom:52px; }
.section-head .kicker{ font-size:12.5px; font-weight:700; letter-spacing:0.16em; text-transform:uppercase; color:var(--teal-dark); margin-bottom:14px; display:block; }
.section-head h2{ font-size:clamp(1.8rem,3vw,2.5rem); line-height:1.15; }
.section-head p{ margin-top:16px; color:#4b5d62; font-size:16px; max-width:560px; }

/* ---------- IN THE FIELD ---------- */
.infield{ padding:60px 0 44px; overflow:hidden; }
.infield .section-head{ margin-bottom:32px; }
.infield-viewport{ overflow:hidden; -webkit-mask-image:linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image:linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.infield-track{ display:flex; gap:16px; width:-moz-max-content; width:max-content; animation: infieldScroll 60s linear infinite; }
.infield-track:hover{ animation-play-state:paused; }
@keyframes infieldScroll{ from{ transform:translateX(0);} to{ transform:translateX(-50%);} }
.infield-card{ flex:0 0 250px; aspect-ratio:4/5; border-radius:2px; position:relative; overflow:hidden; background:var(--bg-alt); }
.infield-card img{ width:100%; height:100%; -o-object-fit:cover; object-fit:cover; transition:transform .5s ease, filter .5s ease; filter:saturate(0.94) contrast(1.03); }
.infield-card:hover img{ transform:scale(1.06); filter:saturate(1.05) contrast(1.06); }
.infield-card::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg, transparent 45%, rgba(0,20,25,0.62) 100%); }
.infield-card .cap{ position:absolute; left:0; bottom:0; z-index:2; padding:15px 17px; color:#fff; font-family:'Archivo',sans-serif; font-weight:700; font-size:13.5px; text-shadow:0 2px 10px rgba(0,0,0,0.35); }
.infield-card .cap small{ display:block; font-family:'Inter',sans-serif; font-weight:500; font-size:10.5px; opacity:0.85; text-transform:uppercase; letter-spacing:0.06em; margin-top:3px; }

/* ---------- STAT COUNTER ROW ---------- */
.stats-row{ display:grid; grid-template-columns:repeat(4,1fr); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.stat-cell{ padding:36px 28px; border-right:1px dashed var(--line); }
.stat-cell:last-child{ border-right:none; }
.stat-num{ font-family:'Archivo Expanded',sans-serif; font-size:clamp(2rem,3.4vw,2.7rem); font-weight:800; color:var(--navy-deep); line-height:1; }
.stat-label{ margin-top:10px; font-size:12px; color:var(--grey); letter-spacing:0.04em; text-transform:uppercase; font-weight:600; }
@media (max-width:820px){ .stats-row{ grid-template-columns:1fr 1fr; } .stat-cell:nth-child(2){ border-right:none; } }
@media (max-width:520px){ .stats-row{ grid-template-columns:1fr; } .stat-cell{ border-right:none; border-bottom:1px dashed var(--line); } }

/* ---------- CLIENT MARQUEE ---------- */
.marquee-wrap{ overflow:hidden; background:var(--bg-alt); border-bottom:1px solid var(--line); padding:22px 0;
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.marquee-track{ display:flex; gap:0; width:-moz-max-content; width:max-content; animation: marqueeScroll 28s linear infinite; }
.marquee-track:hover{ animation-play-state:paused; }
@keyframes marqueeScroll{ from{ transform:translateX(0);} to{ transform:translateX(-50%);} }
.marquee-item{ display:flex; align-items:center; gap:26px; padding:0 26px; font-family:'Archivo',sans-serif; font-weight:700; font-size:14.5px; color:var(--navy); white-space:nowrap; }
.marquee-item .loc{ font-family:'Inter',sans-serif; font-weight:500; font-size:12px; color:var(--grey); text-transform:uppercase; letter-spacing:0.04em; }
.marquee-item .dot{ width:5px; height:5px; border-radius:50%; background:var(--teal); flex-shrink:0; }

/* ---------- SERVICES ---------- */
.services-grid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:2px; background:var(--line); border:1px solid var(--line); }
.service-tile{ background:#fff; padding:32px 26px 28px; min-height:180px; display:flex; flex-direction:column; justify-content:flex-end; position:relative; overflow:hidden; transition:background .3s ease, transform .3s ease; }
.service-tile::before{ content:""; position:absolute; top:0; left:0; width:100%; height:4px; transition:height .3s ease; }
.service-tile h3{ font-family:'Archivo',sans-serif; font-size:17.5px; font-weight:700; color:var(--navy-deep); margin-bottom:8px; position:relative; }
.service-tile p{ font-size:13.5px; color:var(--grey); margin:0; position:relative; }
.service-tile .arrow{ position:absolute; top:24px; right:22px; font-size:18px; color:var(--teal); opacity:0; transform:translate(-6px,6px); transition:all .3s ease; }
.service-tile:hover{ background:var(--bg-alt); transform:translateY(-4px); box-shadow:0 14px 30px rgba(19,43,50,0.08); }
.service-tile:hover::before{ height:6px; }
.service-tile:hover .arrow{ opacity:1; transform:translate(0,0); }
.t-teal::before{ background:var(--teal); } .t-orange::before{ background:var(--orange); }
.t-green::before{ background:var(--green); } .t-sky::before{ background:var(--sky); }
.t-navy::before{ background:var(--navy); } .t-grey::before{ background:var(--grey); }
@media (max-width:760px){ .services-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:520px){ .services-grid{ grid-template-columns:1fr; } }

/* ---------- PROCESS ---------- */
.process{ background:var(--bg-alt); }
.process-list{ display:grid; grid-template-columns:repeat(4,1fr); gap:0; }
.step{ padding:0 24px 0 0; border-right:1px dashed var(--line); transition:transform .3s ease; }
.step:hover{ transform:translateY(-4px); }
.step:last-child{ border-right:none; padding-right:0; }
.step .num{ font-family:'Archivo Expanded',sans-serif; font-size:40px; font-weight:800; color:transparent; -webkit-text-stroke:1.4px var(--teal); margin-bottom:16px; display:block; transition:-webkit-text-stroke-color .3s ease; }
.step:hover .num{ -webkit-text-stroke-color: var(--orange); }
.step h3{ font-family:'Archivo',sans-serif; font-size:16px; font-weight:700; margin-bottom:9px; color:var(--navy-deep);}
.step p{ font-size:13.5px; color:#57696e; margin:0; }
@media (max-width:900px){ .process-list{ grid-template-columns:1fr 1fr; row-gap:38px; } .step{ border-right:none; padding-right:0; } }
@media (max-width:560px){ .process-list{ grid-template-columns:1fr; } }

/* ---------- CERTIFICATION / PROOF ---------- */
.proof{ background:var(--bg-alt); }
.proof .section-head p{ max-width:640px; }
.cert-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.cert-card{ background:#fff; border:1px solid var(--line); border-radius:2px; padding:30px 26px; transition:transform .3s ease, box-shadow .3s ease, border-color .3s ease; }
.cert-card:hover{ transform:translateY(-4px); box-shadow:0 16px 32px rgba(19,43,50,0.09); border-color:var(--teal); }
.cert-mark{ width:44px; height:44px; border-radius:50%; background:var(--navy-deep); color:#fff; display:flex; align-items:center; justify-content:center; font-weight:800; font-size:13px; margin-bottom:18px; font-family:'Archivo',sans-serif; }
.cert-card h3{ font-family:'Archivo',sans-serif; font-size:16.5px; font-weight:700; color:var(--navy-deep); margin-bottom:6px; }
.cert-card p{ font-size:13.5px; color:var(--grey); margin:0; }
@media (max-width:820px){ .cert-grid{ grid-template-columns:1fr; } }

/* ---------- SELECTED WORK GALLERY ---------- */
.gallery-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.gallery-item{ position:relative; aspect-ratio:4/3; overflow:hidden; border-radius:2px; display:flex; align-items:flex-end; background:var(--bg-alt); }
.gallery-item img{ position:absolute; inset:0; width:100%; height:100%; -o-object-fit:cover; object-fit:cover; transition:transform .6s cubic-bezier(.2,.8,.2,1), filter .5s ease; filter:saturate(0.94) contrast(1.03); }
.gallery-item:hover img{ transform:scale(1.07); filter:saturate(1.05) contrast(1.06); }
.gallery-item::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg, transparent 42%, rgba(0,20,25,0.58) 100%); z-index:1; }
.gallery-item .cap{ position:relative; z-index:2; padding:18px 20px; color:#fff; font-family:'Archivo',sans-serif; font-weight:700; font-size:14.5px; text-shadow:0 2px 10px rgba(0,0,0,0.35); transform:translateY(6px); transition:transform .35s ease; }
.gallery-item:hover .cap{ transform:translateY(0); }
.gallery-item .cap small{ display:block; font-family:'Inter',sans-serif; font-weight:500; font-size:11.5px; opacity:0.85; text-transform:uppercase; letter-spacing:0.08em; margin-top:4px;}
@media (max-width:820px){ .gallery-grid{ grid-template-columns:1fr 1fr;} }
@media (max-width:560px){ .gallery-grid{ grid-template-columns:1fr;} }

/* ---------- GROUP CREDIBILITY ---------- */
.group-band{ position:relative; overflow:hidden; background:var(--navy-deep); color:#e7f2f4; padding:84px 0; }
.group-blob{ position:absolute; width:600px; height:600px; border-radius:50%; background:radial-gradient(circle, rgba(0,187,180,0.35), transparent 65%); top:-220px; left:-160px; filter:blur(10px); animation: driftBlob 18s ease-in-out infinite; }
@keyframes driftBlob{ 0%,100%{ transform:translate(0,0) scale(1);} 50%{ transform:translate(-30px,40px) scale(1.12);} }
.group-head{ position:relative; z-index:2; max-width:600px; margin-bottom:46px; }
.group-head .kicker{ color:var(--teal); font-size:12.5px; font-weight:700; letter-spacing:0.16em; text-transform:uppercase; display:block; margin-bottom:14px;}
.group-head h2{ color:#fff; font-size:clamp(1.8rem,3vw,2.4rem); line-height:1.2;}
.group-head p{ margin-top:16px; color:#a9c3ca; font-size:16px;}
.group-stats{ position:relative; z-index:2; display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:rgba(255,255,255,0.12); border:1px solid rgba(255,255,255,0.12); }
.gstat{ background:var(--navy-deep); padding:28px 22px; transition:background .3s ease; }
.gstat:hover{ background:#004a6c; }
.gstat strong{ display:block; font-family:'Archivo Expanded',sans-serif; font-size:30px; font-weight:800; color:#fff;}
.gstat span{ font-size:12px; color:#9fbcc4; letter-spacing:0.03em; display:block; margin-top:8px; }
.sector-strip{ position:relative; z-index:2; display:flex; flex-wrap:wrap; gap:10px; margin-top:34px; }
.sector-chip{ border:1px solid rgba(255,255,255,0.22); color:#cfe6ee; padding:9px 17px; border-radius:20px; font-size:12.5px; font-weight:600; text-decoration:none; transition:all .2s ease; }
.sector-chip:hover{ background:var(--teal); border-color:var(--teal); color:#fff; transform:translateY(-2px); }
.sector-chip.current{ background:var(--teal); border-color:var(--teal); color:#fff; }
@media (max-width:820px){ .group-stats{ grid-template-columns:1fr 1fr; } }

/* ---------- CONTACT ---------- */
.contact{ padding:96px 0; }
.contact-grid{ display:grid; grid-template-columns:1fr 1fr; gap:66px; align-items:start; }
.contact-copy h2{ font-size:clamp(1.9rem,3.2vw,2.6rem); }
.contact-copy p{ margin-top:18px; color:#4b5d62; max-width:420px; }
.contact-detail{ margin-top:30px; display:flex; flex-direction:column; gap:10px; font-size:14.5px; }
.contact-detail a{ text-decoration:none; color:var(--navy); font-weight:600; transition:color .2s ease; }
.contact-detail a:hover{ color:var(--teal-dark); }
form{ display:flex; flex-direction:column; gap:16px; }
.field label{ display:block; font-size:12.5px; font-weight:700; letter-spacing:0.05em; text-transform:uppercase; color:var(--navy-deep); margin-bottom:8px;}
.field input, .field select, .field textarea{ width:100%; padding:13px 14px; border:1.5px solid var(--line); border-radius:var(--radius); font-family:'Inter',sans-serif; font-size:14.5px; background:var(--bg-alt); transition:border-color .2s ease, background .2s ease; }
.field input:focus, .field select:focus, .field textarea:focus{ border-color:var(--teal); outline:none; background:#fff; }
.field textarea{ resize:vertical; min-height:96px; }
.submit-btn{ margin-top:6px; align-self:flex-start; background:var(--navy); color:#fff; border:none; padding:14px 30px; font-weight:700; font-size:14.5px; border-radius:var(--radius); cursor:pointer; transition:background .2s ease, transform .2s ease; }
.submit-btn:hover{ background:var(--teal-dark); transform:translateY(-2px); }
.submit-btn:disabled{ opacity:.6; cursor:default; transform:none; }
#formStatus{ font-size:13.5px; margin-top:4px; }
@media (max-width:860px){ .contact-grid{ grid-template-columns:1fr; } }

/* ---------- FOOTER ---------- */
footer{ background:var(--bg-alt); padding-top:0; }
.texture-band{ width:100%; height:60px; overflow:hidden; }
.texture-band svg{ width:100%; height:100%; }
.footer-inner{ display:flex; justify-content:space-between; align-items:center; padding:32px 0; flex-wrap:wrap; gap:20px; }
.footer-links{ display:flex; gap:24px; flex-wrap:wrap; }
.footer-links a{ text-decoration:none; color:var(--grey); font-size:13px; font-weight:600; transition:color .2s ease; }
.footer-links a:hover{ color:var(--navy); }
.footer-meta{ font-size:12.5px; color:var(--grey); }
.footer-social{ display:flex; gap:14px; }
.footer-social a{ width:32px; height:32px; border-radius:50%; border:1.5px solid var(--line); display:flex; align-items:center; justify-content:center; text-decoration:none; color:var(--navy); transition:all .25s ease; }
.footer-social a:hover{ background:var(--teal); border-color:var(--teal); color:#fff; transform:translateY(-3px); }

.reveal{ opacity:0; transform:translateY(22px); transition:opacity .7s ease, transform .7s ease; }
.reveal.in{ opacity:1; transform:translateY(0); }
.reveal.d1.in{ transition-delay:.08s; } .reveal.d2.in{ transition-delay:.16s; }
.reveal.d3.in{ transition-delay:.24s; } .reveal.d4.in{ transition-delay:.32s; }
.reveal.d5.in{ transition-delay:.4s; } .reveal.d6.in{ transition-delay:.48s; }

.parallax{ will-change:transform; }

/* ---------- RTL (Arabic) SUPPORT ----------
   Activates automatically once Polylang is installed and the Arabic
   version of a page is being viewed (see bhj_is_rtl() in functions.php,
   which sets <html dir="rtl">). Layout mirrors; animation directions
   for the two horizontal scroll loops are intentionally left running
   the same visual direction (right-to-left already reads naturally in
   RTL), everything else flips. */
[dir="rtl"] body{ font-family:'Cairo','Inter',sans-serif; }
[dir="rtl"] h1,[dir="rtl"] h2,[dir="rtl"] h3,[dir="rtl"] .display{ font-family:'Cairo','Archivo Expanded',sans-serif; }
[dir="rtl"] .hero-serif{ font-family:'Cairo','Fraunces',serif; }

[dir="rtl"] .nav{ flex-direction:row-reverse; }
[dir="rtl"] nav.links{ flex-direction:row-reverse; }
[dir="rtl"] nav.links a::after{ right:0; left:auto; }

[dir="rtl"] .stat-cell{ border-right:none; border-left:1px dashed var(--line); }
[dir="rtl"] .stat-cell:last-child{ border-left:none; }

[dir="rtl"] .step{ padding:0 0 0 24px; border-right:none; border-left:1px dashed var(--line); }
[dir="rtl"] .step:last-child{ border-left:none; padding-left:0; }

[dir="rtl"] .cert-item,[dir="rtl"] .contact-detail a{ text-align:right; }

[dir="rtl"] .service-tile .arrow{ right:auto; left:22px; transform:translate(6px,6px) scaleX(-1); }
[dir="rtl"] .service-tile:hover .arrow{ transform:translate(0,0) scaleX(-1); }

[dir="rtl"] .footer-inner{ flex-direction:row-reverse; }
[dir="rtl"] .field label{ text-align:right; }

[dir="rtl"] .hero-actions,[dir="rtl"] .hero-stats{ direction:rtl; }
[dir="rtl"] .marquee-item{ direction:rtl; }
[dir="rtl"] .infield-card .cap,[dir="rtl"] .gallery-item .cap{ text-align:right; }

/* WhatsApp float (kept from earlier build, recolored to sit correctly on light theme) */
.wa-float{
  position:fixed; bottom:24px; right:24px; z-index:60;
  width:56px; height:56px; border-radius:50%; background:#25D366; color:#fff;
  display:flex; align-items:center; justify-content:center; box-shadow:0 10px 24px rgba(0,0,0,.18);
  transition:transform .25s ease;
}
.wa-float:hover{ transform:scale(1.08); }