/* ==========================================================================
   Base: reset, typography, layout primitives
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-height) + 16px);
}

body {
  margin: 0;
  font-family: var(--font-primary);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--color-body);
  background: var(--color-white);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

body.is-locked { overflow: hidden; }

h1, h2, h3, h4, h5, h6 {
  margin: 0 0 0.5em;
  font-family: var(--font-primary);
  font-weight: 600;
  line-height: var(--lh-heading);
  color: var(--color-heading);
  letter-spacing: -0.02em;
}

h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h4); }

p { margin: 0 0 1.1em; text-wrap: pretty; }
h1, h2, h3 { text-wrap: balance; }
p:last-child { margin-bottom: 0; }

a {
  color: inherit;
  text-decoration: none;
  transition: color var(--duration) var(--ease);
}

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

/* <picture> fills fixed-ratio media boxes so object-fit can crop the image */
.service-card__media picture, .project-card__media picture, .capability-card__media picture,
.about__img picture { width: 100%; height: 100%; }

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

address { font-style: normal; }

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}

:focus-visible {
  outline: 2px solid var(--aman-orange);
  outline-offset: 3px;
}

::selection { background: var(--aman-orange); color: var(--color-white); }

.lead {
  font-size: 1.125rem;
  line-height: 1.6;
  color: var(--color-heading);
  font-weight: 500;
}

/* Container — wider than Bootstrap's default to match the 1380px design grid */
.container {
  width: 100%;
  max-width: calc(var(--container-width) + var(--page-gutter) * 2);
  margin-inline: auto;
  padding-inline: var(--page-gutter);
}

/* Sections */
.section { padding-block: var(--section-spacing); position: relative; }
.section--light { background: var(--color-bg-light); }
.section--navy {
  background: var(--aman-navy-dark);
  color: var(--color-text-on-dark);
}
.section--navy h2, .section--navy h3 { color: var(--color-white); }

/* Light section with soft diagonal bands (About, Services) */
.section--bands { overflow: hidden; }
.section--bands > .container { position: relative; z-index: 1; }
.section--bands::before,
.section--bands::after {
  content: "";
  position: absolute;
  top: -20%;
  height: 140%;
  background: rgba(255, 255, 255, 0.6);
  transform: skewX(-32deg);
  pointer-events: none;
}
.section--bands::before { inset-inline-end: 8%; width: 22%; }
.section--bands::after { inset-inline-start: -12%; width: 18%; background: rgba(255, 255, 255, 0.45); }

/* Accessibility helpers */
.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  inset-inline-start: 16px;
  top: -60px;
  z-index: 1000;
  padding: 12px 20px;
  background: var(--aman-navy);
  color: var(--color-white);
  font-weight: 700;
}
.skip-link:focus { top: 16px; }

.stretched-link::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
}

/* Entrance animations (replaces Animate.css: only fadeIn / fadeInUp are used) */
.animate__animated { animation-duration: 0.8s; animation-fill-mode: both; animation-timing-function: var(--ease); }
.animate__fadeInUp { animation-name: fadeInUp; }
.animate__fadeIn { animation-name: fadeIn; }
@keyframes fadeInUp { from { opacity: 0; transform: translate3d(0, 28px, 0); } to { opacity: 1; transform: none; } }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

/* Scroll-triggered entrance: elements are visible without JS; JS adds .js to <html>. */
.anim-ready [data-animate]:not(.is-visible) { opacity: 0; }
[data-animate].is-visible { animation-delay: var(--delay, 0ms); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .anim-ready [data-animate]:not(.is-visible) { opacity: 1; }
}

/* Staging-only helpers */
.dev-placeholder {
  display: inline-block;
  padding: 3px 8px;
  background: #fff3cd;
  border: 1px dashed #b26a00;
  color: #6b4000;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1.4;
  text-transform: none;
}