/* ==========================================================================
   ADLP LLC
   Design system mirrored from the live site's own stylesheet (the
   filesusr.com embed that adlpllc.com renders). Colours, type scale,
   section backgrounds, spacing and component styles are taken from its
   computed styles rather than approximated.

   The one intentional departure is the unified .btn treatment.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens — verbatim from the live site's :root
   -------------------------------------------------------------------------- */
:root {
  --purple: #b99fd6;
  --purple-light: #9b7fc4;
  --purple-bright: #b99fd6;
  --purple-pale: #f8f5fc;
  --purple-mid: #b99fd6;
  --purple-dark: #9b7fc4;
  --lavender: #d7bde2;
  --gold: #c9a84c;
  --gold-dark: #d4ac0d;
  --dark: #7b5da5;
  --darker: #6b4f9e;
  --white: #fff;

  /* Text colours as used on the live site */
  --ink: #333;
  --body-text: #555;
  --muted: #666;
  --label: #444;

  /* RGB triplets for translucent shadows */
  --brand-rgb: 107, 79, 158;   /* --darker */
  --gold-rgb: 201, 168, 76;

  --font-display: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --font-body: "Outfit", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;

  --wrap: 1100px;
  --header-h: 70px;

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --speed: 0.35s;
}

/* --------------------------------------------------------------------------
   2. Base
   -------------------------------------------------------------------------- */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

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

body {
  font-family: var(--font-body);
  font-size: 16px;
  color: var(--ink);
  background: var(--white);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }
a { text-decoration: none; color: inherit; }
ul, ol { list-style: none; }

.visually-hidden {
  position: absolute;
  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;
  top: -100px; left: 12px;
  z-index: 2000;
  background: var(--darker);
  color: var(--white);
  padding: 12px 20px;
  border-radius: 0 0 10px 10px;
  font-weight: 500;
}
.skip-link:focus { top: 0; }

/* --------------------------------------------------------------------------
   3. Unified button — metallic gold, built from the logo ring palette

   Source of the palette: the gold ring around the logo badge is a CSS
   conic-gradient, not part of adlp-logo.png (that file is 100% purple —
   10,413 opaque pixels, zero warm ones). Its stops are the live site's:
     highlight #ffe680 · mid #f0c040 · mid-deep #c8860a · shadow #9a6000

   Contrast: measured against #3d2a6e, the ring's own tones give
     #ffe680 9.62:1 · #f0c040 7.02:1 · #c8860a 3.92:1 · #9a6000 2.31:1
   and against white, only #9a6000 clears (5.19:1). So no single label
   colour survives the full highlight-to-shadow sweep. The face therefore
   runs highlight -> mid -> #d29517, the darkest point on the ring's
   mid->deep segment that still holds 4.5:1 (measured 4.59:1) behind the
   dark-purple label. The true deep tones do the metallic work as a bevel
   rim, where no glyphs sit.
   -------------------------------------------------------------------------- */
:root {
  --ring-highlight: #ffe680;
  --ring-mid: #f0c040;
  --ring-mid-deep: #c8860a;
  --ring-shadow: #9a6000;
  --ring-face-end: #d29517;
  --gold-ink: #3d2a6e;
  --ring-mid-rgb: 240, 192, 64;
  --ring-highlight-rgb: 255, 230, 128;

  /* Softened face: the ends are pulled toward the mid-tone so the sweep is
     gentler than the ring's raw highlight-to-shadow range. Defined once and
     reused by the hover fills and the lab's variant 2, so they cannot drift. */
  --btn-face: linear-gradient(
    135deg,
    #fbdc78 0%,
    #f6d063 26%,
    #efc44e 54%,
    #e5b53c 80%,
    #dbaa33 100%
  );
}

.btn {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  padding: 13px 30px;
  border: 0;
  border-radius: 999px;
  font-family: var(--font-body);
  font-size: 0.95rem;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0.03em;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;

  color: var(--gold-ink);
  background-image: var(--btn-face);
  /* Bevel: a lit top edge and the ring's deep tones as the bottom rim. */
  /* 1px inner highlight along the top edge in the sampled highlight tone,
     then a soft lower rim. Three slots, kept in this inset/inset/non-inset
     shape because the lab variants interpolate against it. */
  box-shadow:
    inset 0 1px 0 rgba(var(--ring-highlight-rgb), 0.3),
    inset 0 -2px 0 rgba(154, 96, 0, 0.4),
    0 2px 6px rgba(154, 96, 0, 0.2);

  transition: all 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Sheen. z-index -1 keeps the band above the button's own background but
   below its label, so the sweep reads as glare rather than washing out text. */
.btn::after {
  content: "";
  position: absolute;
  z-index: -1;
  top: -60%;
  left: -140%;
  width: 55%;
  height: 220%;
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.55) 50%,
    rgba(255, 255, 255, 0) 100%
  );
  transform: skewX(-22deg);
  pointer-events: none;
}

@keyframes btn-sheen {
  from { left: -140%; }
  to   { left: 140%; }
}

.btn:hover {
  transform: translateY(-3px);
  color: var(--gold-ink);
  box-shadow:
    inset 0 1px 0 rgba(var(--ring-highlight-rgb), 0.45),
    inset 0 -2px 0 rgba(154, 96, 0, 0.38),
    0 12px 26px rgba(var(--ring-mid-rgb), 0.4);
}
.btn:hover::after { animation: btn-sheen 1s ease; }

.btn:active { transform: translateY(-1px); }

.btn:focus-visible {
  outline: 3px solid var(--ring-shadow);
  outline-offset: 3px;
}

.btn[disabled],
.btn[aria-disabled="true"] {
  opacity: 0.55;
  cursor: not-allowed;
  transform: none;
  filter: grayscale(0.35);
}
.btn[disabled]::after,
.btn[aria-disabled="true"]::after { display: none; }

/* Secondary on light backgrounds: 2px gold rim, transparent, dark purple
   label; fills to the same metal on hover. */
.btn--ghost {
  background-image: none;
  background-color: transparent;
  color: var(--gold-ink);
  border: 2px solid var(--ring-mid);
  padding: 11px 28px;          /* keeps the 13px/30px box with the border */
  box-shadow: none;
}
.btn--ghost:hover {
  color: var(--gold-ink);
  border-color: var(--ring-face-end);
  background-image: var(--btn-face);
  box-shadow: 0 12px 26px rgba(var(--ring-mid-rgb), 0.4);
}

/* Secondary on the purple hero/careers gradients. Same rim and fill, but the
   resting label stays white: on a #b99fd6-to-#7b5da5 ground no transparent
   button reaches 4.5:1 in any colour, and white is what the live site uses. */
.btn--outline {
  background-image: none;
  background-color: transparent;
  color: var(--white);
  border: 2px solid var(--ring-mid);
  padding: 11px 28px;
  box-shadow: none;
}
.btn--outline:hover {
  color: var(--gold-ink);
  border-color: var(--ring-face-end);
  background-image: var(--btn-face);
  box-shadow: 0 12px 26px rgba(var(--ring-mid-rgb), 0.4);
}
.btn--outline:focus-visible { outline-color: var(--ring-highlight); }

/* .btn--gold is now the same metal as the base button; kept so existing
   markup keeps working without a sweep through every template. */
.btn--gold { }

.btn--block { width: 100%; }

/* --------------------------------------------------------------------------
   4. Logo badge — spinning gold ring + lavender plate, as on the live site
   -------------------------------------------------------------------------- */
.logo-badge {
  /* Must not be inline, or the width/height below are ignored and the badge
     collapses to the size of the ring glow. */
  display: inline-block;
  position: relative;
  flex-shrink: 0;
  overflow: visible;
  width: 44px;
  height: 44px;
  vertical-align: middle;
}
.logo-badge::before {
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  background: conic-gradient(
    from 0deg,
    #9a6000 0%, #c8860a 20%, #f0c040 40%, #ffe680 50%,
    #f0c040 60%, #c8860a 80%, #9a6000 100%
  );
  animation: goldRingSpin 4s linear infinite;
  box-shadow: 0 0 16px rgba(200, 134, 10, 0.65), 0 0 32px rgba(200, 134, 10, 0.3);
  z-index: 0;
}
.logo-badge::after {
  content: "";
  position: absolute;
  inset: 3px;
  border-radius: 50%;
  background: linear-gradient(145deg, #f5f0fc, #e8dcfa);
  z-index: 1;
}
.logo-badge img {
  position: absolute;
  z-index: 2;
  top: 50%;
  left: 50%;
  width: 32px;
  height: 32px;
  transform: translate(-50%, -50%);
  object-fit: contain;
  filter: drop-shadow(0 1px 3px rgba(61, 26, 92, 0.3));
}

.logo-badge--hero { display: block; width: 130px; height: 130px; margin: 0 auto 16px; }
.logo-badge--hero img { width: 100px; height: 100px; }

.logo-badge--footer { width: 52px; height: 52px; }
.logo-badge--footer img { width: 38px; height: 38px; }

@keyframes goldRingSpin { to { transform: rotate(360deg); } }

/* --------------------------------------------------------------------------
   5. Header / navigation
   -------------------------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0; left: 0; right: 0;
  z-index: 999;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--header-h);
  padding: 0 40px;
  background: rgba(107, 79, 158, 0.97);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(195, 155, 211, 0.2);
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--white);
  font-family: var(--font-display);
  font-size: 1.45rem;
  font-weight: 700;
  letter-spacing: normal;
}
/* The wordmark is a single flex item, so the 10px gap above separates the badge
   from the name and nothing else. While "ADLP" and "LLC" were siblings the gap
   landed between them as well, on top of the space character — which read as a
   double space. Inside .brand-name it is an ordinary word space. */
.brand-name { white-space: nowrap; }
.brand .brand-llc { color: var(--gold); }
.brand:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 4px;
  border-radius: 6px;
}

.nav { display: flex; align-items: center; gap: 4px; }
.nav ul {
  display: flex;
  align-items: center;
  gap: 4px;
}
.nav a:not(.btn) {
  display: block;
  padding: 8px 15px;
  border-radius: 7px;
  color: rgba(255, 255, 255, 0.85);
  font-size: 0.9rem;
  transition: all 0.2s;
}
.nav a:not(.btn):hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.12);
}
.nav a:not(.btn):focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 2px;
}
.nav a:not(.btn)[aria-current="page"] { color: #fff; }
/* Nav CTAs sit on a 70px bar, so they run a little tighter than page buttons. */
.nav .btn {
  padding: 9px 20px;
  font-size: 0.9rem;
  border-radius: 999px;
}

.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px; height: 44px;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 8px;
  cursor: pointer;
}
.nav-toggle span {
  display: block;
  width: 25px; height: 2px;
  margin-inline: auto;
  background: #fff;
  border-radius: 2px;
}
.nav-toggle:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }

@media (max-width: 900px) {
  .nav-toggle { display: flex; }
  .nav {
    position: fixed;
    top: var(--header-h); left: 0; right: 0;
    display: none;
    flex-direction: column;
    align-items: stretch;
    gap: 14px;
    padding: 24px;
    background: #6b4f9e;
  }
  .nav.is-open { display: flex; }
  .nav ul { flex-direction: column; align-items: stretch; gap: 6px; }
  .nav a:not(.btn) { padding: 12px 14px; font-size: 1rem; }
  .nav .btn { width: 100%; margin-top: 4px; }
}

/* --------------------------------------------------------------------------
   6. Section shell
   -------------------------------------------------------------------------- */
.section { padding: 90px 40px; }
.section--white { background: var(--white); }
.section--pale { background: var(--purple-pale); }

.wrap { max-width: var(--wrap); margin: 0 auto; }

.section-header { max-width: 680px; margin-bottom: 60px; }
.section-header.center { margin-left: auto; margin-right: auto; text-align: center; }

.section-label {
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--purple-bright);
  margin-bottom: 12px;
}
.section-title {
  font-family: var(--font-display);
  font-size: clamp(2rem, 4vw, 2.9rem);
  font-weight: 400;
  line-height: 1.2;
  color: var(--darker);
  margin-bottom: 16px;
}
.section-title span { color: var(--purple); }
.section-sub {
  font-size: 1rem;
  color: var(--muted);
  line-height: 1.78;
}

/* --------------------------------------------------------------------------
   7. Hero
   -------------------------------------------------------------------------- */
#home {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 100px 20px 60px;
  background: linear-gradient(145deg, #7b5da5 0%, #b99fd6 40%, #9b7fc4 75%, #9b7fc4 100%);
}
.hero-ring {
  position: absolute;
  top: 50%; left: 50%;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  animation: pulse 7s infinite;
}
.hero-ring:nth-of-type(1) { width: 460px; height: 460px; animation-delay: 0s; }
.hero-ring:nth-of-type(2) { width: 720px; height: 720px; animation-delay: 2s; }
.hero-ring:nth-of-type(3) { width: 980px; height: 980px; animation-delay: 4s; }
@keyframes pulse {
  0%, 100% { opacity: 0.3; transform: translate(-50%, -50%) scale(1); }
  50% { opacity: 0.7; transform: translate(-50%, -50%) scale(1.03); }
}

.hero-content { position: relative; z-index: 2; max-width: 800px; }
.hero-logo-wrap { margin-bottom: 22px; }

.hero-pill {
  display: inline-flex;
  align-items: center;
  margin-bottom: 28px;
  padding: 6px 18px;
  background: rgba(255, 255, 255, 0.15);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 999px;
  color: rgba(255, 255, 255, 0.95);
  font-size: 0.85rem;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}
#home h1 {
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 5.5vw, 4rem);
  font-weight: 700;
  line-height: 1.12;
  color: #fff;
  margin-bottom: 24px;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.2);
}
#home h1 em { display: block; font-style: normal; color: var(--gold); }

#home > .hero-content > p {
  max-width: 620px;
  margin: 0 auto 42px;
  color: rgba(255, 255, 255, 0.88);
  font-size: 1.08rem;
  line-height: 1.8;
}

.hero-stats {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 48px;
  margin-bottom: 44px;
}
.stat { text-align: center; }
.stat-num {
  display: block;
  font-family: var(--font-display);
  font-size: 2.4rem;
  font-weight: 700;
  color: var(--gold);
  line-height: 1.15;
}
.stat-label {
  font-size: 0.78rem;
  color: rgba(255, 255, 255, 0.65);
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.hero-btns {
  display: flex;
  gap: 16px;
  justify-content: center;
  flex-wrap: wrap;
}

/* Compact hero for interior pages */
.page-hero {
  padding: 90px 40px 70px;
  text-align: center;
  color: #fff;
  background: linear-gradient(145deg, #7b5da5, #b99fd6 50%, #9b7fc4);
}
.page-hero h1 {
  font-family: var(--font-display);
  font-size: clamp(2.1rem, 4.4vw, 3.1rem);
  font-weight: 700;
  color: #fff;
  margin-bottom: 14px;
}
.page-hero p {
  max-width: 640px;
  margin: 0 auto;
  color: rgba(255, 255, 255, 0.88);
  line-height: 1.8;
}
.page-hero .hero-pill { margin-bottom: 20px; }

/* --------------------------------------------------------------------------
   8. About — gradient visual + mission/vision/values
   -------------------------------------------------------------------------- */
.about-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 70px;
  align-items: center;
  max-width: 1100px;
  margin: 0 auto;
}
.about-visual {
  position: relative;
  overflow: hidden;
  padding: 52px 42px;
  border-radius: 24px;
  color: #fff;
  background: linear-gradient(140deg, #b99fd6, #9b7fc4);
}
.about-visual::before,
.about-visual::after {
  content: "";
  position: absolute;
  border-radius: 50%;
}
.about-visual::before {
  top: -50px; right: -50px;
  width: 200px; height: 200px;
  background: rgba(255, 255, 255, 0.08);
}
.about-visual::after {
  bottom: -40px; left: -40px;
  width: 160px; height: 160px;
  background: rgba(255, 255, 255, 0.05);
}
.about-visual h3 {
  position: relative;
  font-family: var(--font-display);
  font-size: 1.75rem;
  font-weight: 700;
  margin-bottom: 18px;
}
.about-visual p { position: relative; line-height: 1.75; opacity: 0.9; }

.about-tags {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 28px;
}
.tag {
  padding: 6px 16px;
  background: rgba(255, 255, 255, 0.18);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 999px;
  font-size: 0.82rem;
  font-weight: 500;
}

.mvv { display: flex; flex-direction: column; gap: 30px; }
.mvv .section-title { margin-bottom: 0; }
.mvv-item h4 {
  font-family: var(--font-display);
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--purple-dark);
  margin-bottom: 6px;
}
.mvv-item p { color: var(--body-text); line-height: 1.72; font-size: 0.95rem; }

@media (max-width: 900px) {
  .about-grid { grid-template-columns: 1fr; gap: 40px; }
}

/* --------------------------------------------------------------------------
   9. Services / support cards
   -------------------------------------------------------------------------- */
.services-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 24px;
  max-width: 1100px;
  margin: 0 auto;
}
.service-card {
  background: #fff;
  border: 1px solid rgba(163, 89, 189, 0.09);
  border-radius: 18px;
  padding: 38px;
  box-shadow: 0 4px 20px rgba(125, 60, 152, 0.05);
  transition: all 0.3s;
}
.service-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 18px 44px rgba(125, 60, 152, 0.16);
}
.service-icon { font-size: 2.2rem; margin-bottom: 18px; line-height: 1; }
.service-card h3 {
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--darker);
  margin-bottom: 10px;
}
.service-card p { color: var(--muted); line-height: 1.72; font-size: 0.93rem; }
.service-tag {
  display: inline-block;
  margin-top: 16px;
  padding: 4px 14px;
  background: rgba(155, 89, 182, 0.07);
  border-radius: 999px;
  color: var(--purple);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* --------------------------------------------------------------------------
   10. Why — pillars
   -------------------------------------------------------------------------- */
.pillars-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 28px;
  max-width: 1050px;
  margin: 0 auto;
}
.pillar {
  text-align: center;
  padding: 42px 28px;
  border: 1.5px solid rgba(163, 89, 189, 0.12);
  border-radius: 18px;
  transition: all 0.3s;
}
.pillar:hover {
  background: var(--purple-pale);
  border-color: rgba(163, 89, 189, 0.25);
  transform: translateY(-4px);
}
.pillar-icon { font-size: 2.4rem; margin-bottom: 18px; line-height: 1; }
.pillar h3 {
  font-family: var(--font-display);
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--darker);
  margin-bottom: 10px;
}
.pillar p { color: var(--muted); line-height: 1.68; font-size: 0.9rem; }

/* --------------------------------------------------------------------------
   11. Careers band
   -------------------------------------------------------------------------- */
#careers {
  padding: 90px 40px;
  text-align: center;
  color: #fff;
  background: linear-gradient(145deg, #7b5da5, #b99fd6 50%, #9b7fc4);
}
#careers .section-label { color: rgba(244, 208, 63, 0.9); }
#careers .section-title { color: #fff; }
#careers .section-title span { color: var(--gold); }
#careers .section-sub { color: rgba(255, 255, 255, 0.78); }
.careers-inner { max-width: 720px; margin: 0 auto; }
.careers-perks {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
  margin: 34px 0;
}
.perk {
  padding: 8px 22px;
  background: rgba(255, 255, 255, 0.13);
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 999px;
  font-size: 0.86rem;
  color: #fff;
}

/* --------------------------------------------------------------------------
   12. Contact + forms
   -------------------------------------------------------------------------- */
.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  max-width: 1100px;
  margin: 0 auto;
  align-items: start;
}
.contact-items {
  display: flex;
  flex-direction: column;
  gap: 24px;
  margin-top: 34px;
}
.contact-item { display: flex; align-items: flex-start; gap: 16px; }
.contact-icon { font-size: 1.5rem; flex-shrink: 0; margin-top: 2px; line-height: 1; }
.contact-item h3 {
  font-family: var(--font-body);
  font-weight: 600;
  color: var(--darker);
  font-size: 0.95rem;
  margin-bottom: 3px;
}
.contact-item p { color: var(--body-text); font-size: 0.92rem; }

.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.form-field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; }
.form-field label { font-size: 0.85rem; font-weight: 600; color: var(--label); }
.req { color: var(--purple-dark); }

.form-field input,
.form-field select,
.form-field textarea {
  width: 100%;
  padding: 12px 15px;
  border: 1.5px solid #eedff5;
  border-radius: 10px;
  font-family: var(--font-body);
  font-size: 0.93rem;
  color: var(--ink);
  background: #fff;
  transition: border-color 0.2s;
}
.form-field textarea { height: 115px; resize: vertical; }
.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
  outline: none;
  border-color: var(--purple);
  box-shadow: 0 0 0 3px rgba(var(--brand-rgb), 0.12);
}
.hint { font-size: 0.82rem; color: var(--muted); }

.fieldset { border: 0; }
.fieldset > legend { font-size: 0.85rem; font-weight: 600; color: var(--label); }
.check-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 10px;
  margin-top: 10px;
}
.check {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 14px;
  border: 1.5px solid #eedff5;
  border-radius: 10px;
  font-size: 0.92rem;
  cursor: pointer;
  transition: all 0.2s;
}
.check:hover { border-color: var(--purple); background: var(--purple-pale); }
.check input { margin: 3px 0 0; accent-color: var(--darker); }
.check:focus-within {
  border-color: var(--purple);
  box-shadow: 0 0 0 3px rgba(var(--brand-rgb), 0.12);
}
.radio-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 8px; }

.notice {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding: 16px 20px;
  margin-bottom: 30px;
  border: 1px solid rgba(163, 89, 189, 0.12);
  border-radius: 10px;
  background: var(--purple-pale);
  font-size: 0.93rem;
  color: var(--body-text);
  line-height: 1.7;
}
.notice strong { color: var(--darker); }

.form-status { padding: 14px 18px; border-radius: 10px; font-size: 0.93rem; }
.form-status[hidden] { display: none; }
.form-status--ok {
  background: #e8f5e9;
  border: 1px solid #bfe3c8;
  color: #2e7d32;
  font-weight: 600;
}
.form-status--info {
  background: var(--purple-pale);
  border: 1px solid var(--purple);
  color: var(--darker);
}
.form-status--error {
  background: #fce4ec;
  border: 1px solid #f3c4d3;
  color: #c62828;
  font-weight: 600;
}

@media (max-width: 900px) {
  .contact-grid { grid-template-columns: 1fr; gap: 40px; }
  .form-row { grid-template-columns: 1fr; }
}

/* --------------------------------------------------------------------------
   13. Multi-step application form
   -------------------------------------------------------------------------- */
.app-form { max-width: 900px; margin: 0 auto; }

.steps {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 34px;
}
.steps li {
  flex: 1 1 150px;
  padding: 12px 16px;
  border: 1.5px solid rgba(163, 89, 189, 0.12);
  border-radius: 10px;
  background: #fff;
  font-size: 0.88rem;
  color: var(--muted);
  text-align: center;
  transition: all 0.3s;
}
.steps li[aria-current="step"] {
  border-color: var(--darker);
  background: var(--darker);
  color: #fff;
  font-weight: 600;
}
.steps li[data-done="true"] {
  border-color: var(--purple);
  background: var(--purple-pale);
  color: var(--darker);
}

.step-panel {
  background: #fff;
  border: 1px solid rgba(163, 89, 189, 0.09);
  border-radius: 18px;
  padding: 38px;
  box-shadow: 0 4px 20px rgba(125, 60, 152, 0.05);
}
.step-panel[hidden] { display: none; }
.step-panel h2 {
  font-family: var(--font-display);
  font-size: 1.8rem;
  font-weight: 400;
  color: var(--darker);
  margin-bottom: 8px;
}
.step-panel h3 {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--darker);
  margin: 26px 0 4px;
}
.step-panel > p.section-sub { margin-bottom: 26px; }

.step-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: space-between;
  margin-top: 26px;
}

.dropzone {
  display: grid;
  place-items: center;
  gap: 6px;
  padding: 26px 20px;
  border: 2px dashed var(--purple);
  border-radius: 18px;
  background: var(--purple-pale);
  text-align: center;
  color: var(--muted);
  font-size: 0.92rem;
  cursor: pointer;
  transition: all 0.3s;
}
.dropzone:hover { border-color: var(--darker); background: #f2ecfa; }
.dropzone:focus-within {
  border-color: var(--darker);
  box-shadow: 0 0 0 3px rgba(var(--brand-rgb), 0.12);
}
.dropzone span:first-child { font-size: 1.7rem; }

.review-list { display: grid; gap: 10px; margin-bottom: 24px; }
.review-list div {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 10px 0;
  border-bottom: 1px solid #eedff5;
  font-size: 0.92rem;
}
.review-list dt { color: var(--muted); }
.review-list dd { color: var(--ink); font-weight: 600; text-align: right; }

/* --------------------------------------------------------------------------
   14. Prose (policy pages)
   -------------------------------------------------------------------------- */
.prose { max-width: 780px; margin: 0 auto; }
.prose h2 {
  font-family: var(--font-display);
  font-size: 1.9rem;
  font-weight: 400;
  color: var(--darker);
  margin: 1.7em 0 0.5em;
}
.prose h2:first-child { margin-top: 0; }
.prose p { color: var(--body-text); line-height: 1.85; margin-bottom: 1.15em; }
.prose a { color: var(--darker); font-weight: 600; }

/* --------------------------------------------------------------------------
   15. Footer
   -------------------------------------------------------------------------- */
.site-footer {
  padding: 60px 40px 30px;
  background: linear-gradient(135deg, #9b7fc4, #b99fd6);
  border-top: 3px solid #c9a84c;
}
.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 40px;
  max-width: 1100px;
  margin: 0 auto 48px;
}
.footer-brand .brand { margin-bottom: 14px; }
.footer-brand p {
  color: rgba(255, 255, 255, 0.5);
  font-size: 0.88rem;
  line-height: 1.78;
}
.footer-col h2 {
  color: rgba(255, 255, 255, 0.9);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.9rem;
  letter-spacing: 0.05em;
  margin-bottom: 18px;
}
.footer-col ul { display: flex; flex-direction: column; gap: 10px; }
.footer-col li a {
  color: rgba(255, 255, 255, 0.5);
  font-size: 0.87rem;
  transition: color 0.2s;
}
.footer-col li a:hover { color: var(--gold); }
.footer-col li a:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
  border-radius: 3px;
}
.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  max-width: 1100px;
  margin: 0 auto;
  padding-top: 28px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}
.footer-bottom span { color: rgba(255, 255, 255, 0.38); font-size: 0.82rem; }

/* --------------------------------------------------------------------------
   16. Small screens — mirrors the live site's 480px block
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .footer-bottom { flex-direction: column; text-align: center; }
}

@media (max-width: 480px) {
  body { font-size: 14px; }

  .site-header { padding: 0 16px; }
  /* The live site shrinks only the "LLC" span here, keeping "ADLP" full size. */
  .brand .brand-llc { font-size: 1.1rem; }

  #home { padding: 80px 16px 40px; }
  #home h1 { font-size: 1.9rem; }
  .hero-stats { flex-direction: column; gap: 16px; }
  .hero-btns { flex-direction: column; gap: 12px; width: 100%; }
  .hero-btns .btn { width: 100%; }

  .section,
  #careers { padding: 50px 16px; }
  .page-hero { padding: 56px 16px 44px; }

  .about-grid { grid-template-columns: 1fr; gap: 32px; }
  .about-visual { padding: 32px 20px; }

  .services-grid { grid-template-columns: 1fr; gap: 14px; }
  .service-card { padding: 24px 20px; }

  .pillars-grid { grid-template-columns: 1fr; gap: 14px; }
  .pillar { padding: 28px 20px; }

  .contact-grid { grid-template-columns: 1fr; gap: 32px; }

  .footer-grid { grid-template-columns: 1fr; gap: 24px; }
  .site-footer { padding: 40px 16px 24px; }

  .section-title { font-size: 1.8rem; }
  .section-header { margin-bottom: 36px; }

  .step-panel { padding: 22px 18px; }
  .steps li { flex: 1 1 100%; }
  .step-actions .btn { width: 100%; }
}

/* --------------------------------------------------------------------------
   17. Reduced motion
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }

  .btn, .btn:hover, .btn:active,
  .service-card, .service-card:hover,
  .pillar, .pillar:hover,
  .logo-badge::before,
  .hero-ring {
    transform: none !important;
    animation: none !important;
  }
  /* No sweeping sheen; the colour and shadow feedback on hover is kept so
     the button still clearly responds. */
  .btn::after,
  .btn:hover::after {
    display: none !important;
    animation: none !important;
  }

  /* The hero rings are centred with a transform, so keep that one. */
  .hero-ring { transform: translate(-50%, -50%) !important; }
}

/* --------------------------------------------------------------------------
   18. Flowing-silk animated background — ADDITIVE, shared by every band

   Applied by assets/js/silk.js to any element carrying data-silk. The band
   keeps its CSS gradient, which is what shows whenever the canvas does not
   paint: reduced motion, no WebGL, a lost context, or before the first frame.
   Nothing inside a band is restyled.

   Stacking. .has-silk makes the band a stacking context, so the canvas at
   z-index -2 and the veil at -1 paint above the band's own background but
   below every child. That matters because non-positioned text paints earlier
   than a positioned z-index:0 element would, so a canvas at 0 would cover the
   footer's links and the page-hero copy. Negative z-index inside an isolated
   context avoids touching any existing child's z-index.
   -------------------------------------------------------------------------- */
.has-silk {
  position: relative;   /* no offsets, so nothing moves */
  overflow: hidden;     /* the canvas can never bleed past the band */
  isolation: isolate;   /* keeps the negative z-index layers inside the band */
}

.silk-canvas {
  position: absolute;
  inset: 0;
  z-index: -2;
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.6s ease;
}
/* Added by the script on the first painted frame, so the gradient is never
   replaced by an empty canvas. */
.silk-canvas.is-live { opacity: 1; }

.silk-veil {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}
/* Centred copy — hero, page heroes, careers band. */
.silk-veil--radial {
  background: radial-gradient(
    ellipse 62% 58% at 50% 52%,
    rgba(107, 79, 158, 0.30) 0%,
    rgba(107, 79, 158, 0.22) 45%,
    rgba(107, 79, 158, 0) 76%
  );
}
/* Footer copy spans the full width, so the darkening is uniform. Measured:
   this holds the footer's small translucent-white text at 1.59:1, marginally
   above the 1.57:1 it has today. See README. */
.silk-veil--flat {
  background: rgba(107, 79, 158, 0.30);
}

@media (prefers-reduced-motion: reduce) {
  /* The script never initialises here; hide the layers too so nothing paints. */
  .silk-canvas, .silk-veil { display: none; }
}