/* ==========================================================================
   AFROSYSTEMS TECHNOLOGIES LTD — stylesheet (rev 4)
   Fixed-composition architecture: every position/size below is expressed
   in rem, taken directly from LAYOUT rev.pdf's own vector coordinates
   (1px at the 1684px reference width = 1/16 rem). The root font-size
   scales in direct proportion to viewport width (see the html{} rule
   below), so the entire page — every element, all at once — scales as
   one rigid unit, the way a photocopy or a zoomed PDF page does. This
   is pure CSS: the browser computes it as part of its normal layout
   pass, before any JavaScript runs, so there is no unscaled state for
   anything to flash through on load.
   ========================================================================== */

@font-face { font-family:"Century Gothic"; src:url("../fonts/CenturyGothic.ttf"); font-weight:400; font-display:swap; }
@font-face { font-family:"Century Gothic"; src:url("../fonts/CenturyGothic-Bold.ttf"); font-weight:700; font-display:swap; }
@font-face { font-family:"Clarendon BT"; src:url("../fonts/ClarendonBT-Roman.ttf"); font-weight:400; font-display:swap; }
@font-face { font-family:"Clarendon BT"; src:url("../fonts/ClarendonBT-Bold.ttf"); font-weight:700; font-display:swap; }
@font-face { font-family:"Futura Md BT"; src:url("../fonts/FuturaBT-Medium.ttf"); font-weight:500; font-display:swap; }
@font-face { font-family:"Futura Md BT"; src:url("../fonts/FuturaBT-Bold.ttf"); font-weight:700; font-display:swap; }
@font-face { font-family:"Palatino Linotype"; src:url("../fonts/PalatinoLinotype-Roman.ttf"); font-weight:400; font-display:swap; }
@font-face { font-family:"Palatino Linotype"; src:url("../fonts/PalatinoLinotype-Bold.ttf"); font-weight:700; font-display:swap; }

:root{
  --blue:  #406187;
  --white: #ffffff;
  --black: #000000;

  --font-nav:     "Futura Md BT", sans-serif;
  --font-display: "Clarendon BT", serif;
  --font-body:    "Century Gothic", sans-serif;
  --font-footer:  "Palatino Linotype", serif;

  --page-w: 105.25rem;
  --page-h: 391.9375rem;
  --header-h: 5.3125rem;
}

/* ---- Fluid, JS-free scaling ------------------------------------------
   105.25rem = 1684px reference width at the browser's 16px default root
   font-size. Every measurement in this file is in rem, so as this root
   size scales with viewport width, the whole page scales uniformly.
   clamp() keeps it within sane bounds at extreme viewport widths.
   The second declaration prefers a JS-measured --viewport-w (see main.js)
   over raw 100vw, correcting a minor cross-browser quirk where 100vw
   includes a classic scrollbar's width and 100vw does not. It's a pure
   refinement: if JS hasn't run (or never runs), the first declaration
   already applies and is already correct in every way that matters. */
html{
  font-size: clamp(2.5px, calc(100vw / 105.25), 40px);
  font-size: clamp(2.5px, calc(var(--viewport-w, 100vw) / 105.25), 40px);
}

*,*::before,*::after{ box-sizing:border-box; }
html,body{ margin:0; padding:0; background:#fff; }
body{ font-family:var(--font-body); -webkit-font-smoothing:antialiased; }
img{ max-width:none; display:block; }
a{ text-decoration:none; color:inherit; }
button{ font-family:inherit; cursor:pointer; background:none; border:none; }

@media (prefers-reduced-motion: reduce){
  *{ animation-duration:.001ms !important; transition-duration:.001ms !important; }
}
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible{
  outline:0.1875rem solid var(--blue); outline-offset:0.125rem;
}

/* ---- Composition ------------------------------------------------------
   #canvas is simply a positioning context sized to the full composition
   (rem-based, so it scales with the root font-size automatically — no
   transform, no JS, no wrapper needed to manage its size). */
#canvas{
  position:relative; width:var(--page-w); height:var(--page-h);
  background:#fff;
}
.site-header{
  position:fixed; top:0; left:0; width:var(--page-w); height:var(--header-h);
  z-index:1000;
  background:transparent;
  transition:background-color .35s ease, box-shadow .35s ease;
}
/* Fix (i): header turns fully opaque plain white — no shadow at its own
   top edge. The ONLY shadow is the bottom one, gated separately below. */
.site-header.is-solid{ background:var(--white); }
.site-header.has-shadow{ box-shadow:0 0.25rem 0.875rem -0.25rem rgba(20,30,50,.20); }

/* ==========================================================================
   HEADER
   ========================================================================== */
.site-header__logo{ position:absolute; left:12.5rem; top:0.375rem; width:13.8125rem; height:4.625rem; }
.site-header__logo img{ width:100%; height:100%; }

.site-nav a, .site-nav button.nav-link{
  position:absolute; top:2.1875rem;
  font-family:var(--font-nav); font-weight:500; font-size:1.375rem; line-height:1.4375rem;
  color:var(--blue); white-space:nowrap;
}
.site-nav a:hover, .site-nav button.nav-link:hover{ opacity:.72; }

/* Fix (ii): explicit gap between "SERVICES" and the chevron */
.nav-services__chevron{
  position:absolute; left:68.125rem; top:2.5625rem;
  display:inline-block; width:0.5625rem; height:0.5625rem;
  border:solid var(--blue); border-width:0 0.125rem 0.125rem 0;
  transform:rotate(45deg); transition:transform .2s ease;
}
.nav-services.is-open .nav-services__chevron{ transform:rotate(-135deg); top:2.8125rem; }

.services-dropdown{
  position:absolute; left:57.9375rem; top:3.75rem;
  background:var(--white); border-radius:0.875rem;
  box-shadow:0 1.125rem 2.5rem -0.75rem rgba(20,30,50,.28);
  padding:0.5rem 0; width:21.25rem;
  opacity:0; visibility:hidden; transform:translateY(-0.375rem);
  transition:opacity .18s ease, transform .18s ease, visibility .18s;
}
.nav-services.is-open .services-dropdown{ opacity:1; visibility:visible; transform:translateY(0); }
.services-dropdown ul{ list-style:none; margin:0; padding:0; }
.services-dropdown a{
  position:static; display:block; padding:0.6875rem 1.375rem 0.6875rem 0.6875rem;
  font-family:var(--font-body); font-size:1rem; color:var(--blue);
}
.services-dropdown li{ margin:0 0.875rem; border-bottom:0.0625rem solid rgba(64,97,135,.16); }
.services-dropdown li:last-child{ border-bottom:none; }
.services-dropdown a:hover{ background:rgba(64,97,135,.06); }

.site-header__search{ position:absolute; left:91.9375rem; top:1.625rem; width:1.875rem; height:2.1875rem; }
.search-toggle{ display:block; width:100%; height:100%; padding:0; }
.search-toggle img{ width:100%; height:100%; }

/* Fix: thin grey outline, not thick blue */
.search-panel{
  position:fixed; top:var(--header-h); left:0; right:0;
  background:var(--white);
  border-bottom:0.0625rem solid rgba(0,0,0,.15);
  padding:1.375rem clamp(1.25rem,4vw,4rem);
  transform:translateY(calc(-100% - var(--header-h)));
  transition:transform .3s ease;
  z-index:1200;
  display:flex; gap:0.875rem; align-items:center;
}
.search-panel.is-open{ transform:translateY(0); box-shadow:0 0.5rem 1.5rem -0.625rem rgba(0,0,0,.18); }
.search-panel input{
  flex:1; font-family:var(--font-body); font-size:1.125rem;
  padding:0.625rem 0.875rem; border:0.0625rem solid rgba(0,0,0,.25); border-radius:0.375rem;
}
.search-panel input:focus{ border-color:#8D4A1D; outline:none; }
.search-panel .search-close{ font-size:1.625rem; color:var(--blue); padding:0.25rem 0.625rem; }
.search-results{
  position:fixed; top:var(--header-h); left:0; right:0;
  background:var(--white); z-index:1150; max-height:60vh; overflow-y:auto;
  box-shadow:0 0.75rem 1.875rem -0.625rem rgba(0,0,0,.2); display:none;
}
.search-results.is-open{ display:block; }
.search-results ul{ list-style:none; margin:0; padding:0.5rem 0; }
.search-results a{ display:block; padding:0.8125rem clamp(1.25rem,4vw,4rem); border-bottom:0.0625rem solid rgba(0,0,0,.06); }
.search-results a:hover{ background:rgba(64,97,135,.06); }
.search-results .result-title{ color:var(--blue); font-weight:700; display:block; margin-bottom:0.1875rem; }
.search-results .result-snippet{ font-size:0.8125rem; color:#444; }
.search-results .no-results{ padding:1rem clamp(1.25rem,4vw,4rem); color:#666; }

/* ==========================================================================
   HERO — no globe; new single-line tagline + points layout; sequenced fades
   ========================================================================== */
.hero{
  position:absolute; left:0; top:0; width:105.25rem; height:41.3125rem; overflow:hidden;
  background-color:#0b1a2b;
  /* Tiny (32x12px) blurred preview of the hero photo, inlined so it paints
     instantly with zero network requests -- the real photo (an <img> child,
     see .hero__bg) fades in on top of it once it finishes downloading. */
  background-image:url("data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAAsICAoIBwsKCQoNDAsNERwSEQ8PESIZGhQcKSQrKigkJyctMkA3LTA9MCcnOEw5PUNFSElIKzZPVU5GVEBHSEX/2wBDAQwNDREPESESEiFFLicuRUVFRUVFRUVFRUVFRUVFRUVFRUVFRUVFRUVFRUVFRUVFRUVFRUVFRUVFRUVFRUVFRUX/wAARCAAMACADASIAAhEBAxEB/8QAGQAAAQUAAAAAAAAAAAAAAAAABgIDBAUH/8QAHxAAAQQCAgMAAAAAAAAAAAAAAQACAyEEEQUGFTFS/8QAFgEBAQEAAAAAAAAAAAAAAAAAAgME/8QAGhEAAQUBAAAAAAAAAAAAAAAAAAECAxESMf/aAAwDAQACEQMRAD8AFvPBqVH2FhOiht3pMOo0tCzOJJE1A7xuZiOjsK2g5xgFELM45XtFOKn4uTL9FHWuiqj/2Q==");
  background-size:cover; background-position:center;
}
.hero__bg{
  position:absolute; left:0; top:0; width:105.25rem; height:41.3125rem; object-fit:cover;
  opacity:0; transition:opacity .5s ease;
}
.hero__bg.is-loaded{ opacity:1; }

.hero__title{
  position:absolute; left:13.7562rem; top:13.8163rem; width:68.75rem;
  font-family:var(--font-display); font-weight:700; color:var(--white);
  font-size:3.25rem; line-height:1.05; margin:0; letter-spacing:0.01875rem;
  opacity:0; transform:translateY(-3rem);
  transition:opacity 2s ease, transform 2s cubic-bezier(.22,.61,.36,1);
}
.hero__title.is-visible{ opacity:1; transform:translateY(0); }

.hero__tagline{
  position:absolute; left:13.7188rem; top:19.1612rem; width:71.25rem;
  font-family:var(--font-body); font-weight:700; color:#00b0f0;
  font-size:2.5rem; line-height:1.1; margin:0; white-space:nowrap;
  opacity:0; transform:translateY(-3rem);
  transition:opacity 2s ease, transform 2s cubic-bezier(.22,.61,.36,1);
}
.hero__tagline.is-visible{ opacity:1; transform:translateY(0); }

.hero__points{
  position:absolute; left:13.7188rem; top:22.683rem; width:50rem;
  list-style:none; margin:0; padding:0;
  font-family:var(--font-body); color:#00b0f0; font-size:1.75rem; line-height:1.2;
  opacity:0; transform:translateY(-3rem);
  transition:opacity 2s ease, transform 2s cubic-bezier(.22,.61,.36,1);
}
.hero__points.is-visible{ opacity:1; transform:translateY(0); }
.hero__points li{ padding-left:2.2725rem; position:relative; margin-bottom:0.378rem; }
.hero__points li:last-child{ margin-bottom:0; }
.hero__points li::before{ content:"\2022"; position:absolute; left:0; font-size:1.2em; top:-.03em; line-height:1; }

/* ==========================================================================
   SECTION HEADINGS
   ========================================================================== */
.section-heading{
  position:absolute; left:0; width:105.25rem; text-align:center;
  font-family:var(--font-body); font-weight:700; color:var(--blue);
  font-size:2.25rem; text-transform:uppercase; margin:0;
}
/* Fix (vii): Message Us heading is left-positioned, not centered */
.section-heading.is-left{
  width:auto; text-align:left;
}

/* ==========================================================================
   WHO WE ARE
   ========================================================================== */
.who-we-are p{
  position:absolute; left:50%; transform:translateX(-50%);
  font-family:var(--font-body); font-size:1.5rem; line-height:2.20625rem;
  color:var(--black); text-align:center;
}

/* ==========================================================================
   OUR SERVICES
   ========================================================================== */
.service-row__media{ position:absolute; }
.service-row__media img{ width:100%; height:100%; object-fit:cover; }

.service-row__title{
  position:absolute;
  font-family:var(--font-body); font-weight:700; color:var(--blue);
  font-size:1.875rem; line-height:1.2; margin:0;
}
/* Fix (vi): demarcating line — was 0.1875rem, LAYOUT specifies 0.75pt ("¾ thickness") */
.service-row__rule{
  position:absolute; height:0; margin:0; padding:0;
  border:none; border-top:0.0625rem solid var(--blue); opacity:.92;
}
.service-row__narration{
  position:absolute; margin:0;
  font-family:var(--font-body); font-size:1.5rem; line-height:2.190625rem; color:var(--black);
}

.btn-oval{
  position:absolute; width:15.625rem; height:3.125rem;
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font-body); font-weight:700; font-size:1.5rem;
  text-transform:uppercase; letter-spacing:.0.1875rem;
  border-radius:62.4375rem; border:0.125rem solid var(--blue); color:var(--blue); background:var(--white);
  transition:background-color .2s ease, color .2s ease;
}
.btn-oval:hover{ background:var(--blue); color:var(--white); }
/* Fix (x): clean single shorthand border so the pill renders smoothly */
.btn-send{ border:none; box-shadow:inset 0 0 0 0.03125rem var(--black); color:var(--black); }
.btn-send:hover{ box-shadow:inset 0 0 0 0.03125rem var(--blue); background:var(--blue); color:var(--white); }

/* ==========================================================================
   MESSAGE US
   ========================================================================== */
.message-us__contact p, .message-us__contact a{
  position:absolute;
  font-family:var(--font-body); font-size:1.75rem; line-height:1.42; color:var(--black); margin:0;
}
.message-us__contact img{ position:absolute; }

.message-us__logo{ position:absolute; left:41.5625rem; top:327.4375rem; width:14.8125rem; height:22.25rem; }
.message-us__logo img{ width:100%; height:100%; animation:spinY 6s linear infinite; }
@keyframes spinY{ from{ transform:rotateY(0deg); } to{ transform:rotateY(360deg); } }

.form-field label{
  position:absolute;
  font-family:var(--font-body); font-size:1.75rem; color:var(--black);
}
.form-field input, .form-field textarea{
  position:absolute;
  font-family:var(--font-body); font-size:1.125rem;
  border:none; border-radius:0.4375rem; padding:0.625rem 1rem;
  box-shadow:inset 0 0 0 0.03125rem var(--black);
  transition:box-shadow .18s ease;
}
.form-field input:focus, .form-field textarea:focus{ box-shadow:inset 0 0 0 0.03125rem #8D4A1D; outline:none; }
.form-field textarea{ resize:none; }
.form-error{ position:absolute; color:#c0392b; font-size:0.875rem; margin:0; display:none; }
.form-field.has-error .form-error{ display:block; }
.form-status{
  position:absolute; top:350.25rem; height:3.125rem; right:21.875rem;
  display:flex; align-items:center; justify-content:flex-end;
  font-family:var(--font-body); font-size:1.375rem;
}
.form-status.success{ color:#1a7a3c; }
.form-status.error{ color:#c0392b; }

/* ==========================================================================
   FOOTER
   ========================================================================== */
.site-footer{ position:absolute; left:0; width:105.25rem; }
.site-footer__bg{ position:absolute; left:0; top:0; width:105.25rem; height:33.0625rem; }
.site-footer__bg img{ width:100%; height:100%; }

.footer-col h3{
  position:absolute;
  font-family:var(--font-footer); font-weight:700; font-size:1.625rem;
  color:var(--white); text-transform:uppercase; margin:0;
  text-decoration:underline; text-underline-offset:0.375rem;
}
.footer-col ul{ list-style:none; margin:0; padding:0; }
.footer-col li{ position:absolute; display:flex; align-items:baseline; gap:1.625rem; }
.footer-col li a{ position:static; font-family:var(--font-footer); font-size:1.625rem; color:var(--white); white-space:nowrap; }
.footer-bullet{ position:static; color:var(--white); font-size:1.375rem; line-height:1; }
.footer-col a:hover{ text-decoration:underline; }

.footer-contact > p, .footer-contact > a{
  position:absolute;
  font-family:var(--font-footer); font-size:1.625rem; color:var(--white); margin:0; line-height:1.3;
  white-space:nowrap;
}
.footer-contact p a{ position:static; color:inherit; }
.footer-contact p a:hover{ text-decoration:underline; }
.footer-contact img{ position:absolute; }

.site-footer__bottom{
  position:absolute; left:0; width:105.25rem; text-align:center;
  font-family:var(--font-body); font-size:1rem; color:var(--white); margin:0;
}