/* uk-director-service-address.css -- styles used only on uk-director-service-address.html. */

.uk-director-page-shell::before {
  background:
    radial-gradient(ellipse at 80% 10%, rgba(15, 93, 255, .32), transparent 28rem),
    radial-gradient(circle at 6% 50%, rgba(0, 156, 255, .15), transparent 25rem),
    linear-gradient(105deg, rgba(0, 12, 38, .18), rgba(0, 0, 0, 0) 45%);
}

/* Small bullet dot in front of this page's eyebrow labels, matching the
   screenshot -- kept scoped to this page rather than added to the shared
   .eyebrow class used across the whole site. */
.uk-director-page-shell .eyebrow {
  display: flex;
  align-items: center;
  gap: 8px;
}

.uk-director-page-shell .eyebrow::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--cyan);
  box-shadow: 0 0 8px rgba(0, 211, 255, .8);
}

/* The hero eyebrow stays left-aligned (it sits in a left-aligned copy
   column), but section eyebrows that introduce a centered heading -- e.g.
   "How It Works" -- need the flex row itself centered, since a flex
   container ignores the ancestor's text-align. */
.uk-director-page-shell .uk-section-title .eyebrow {
  justify-content: center;
}

/* ---------- Section rhythm ----------
   Matches the section-to-section gap already used across the site's USA
   service pages (~72px, e.g. business-address-setup.html,
   registered-agent-service.html, ein-application.html). */
.uk-director-page-shell .service-main .container > section + section,
.uk-director-page-shell .service-main .container > .glass-card + section,
.uk-director-page-shell .service-main .container > section + .glass-card,
.uk-director-page-shell .service-main .container > .glass-card + .glass-card {
  margin-top: 72px;
}

/* The "How It Works" heading sits inside the same glass-card panel as the
   4-step process below it (previously its own separate boxed section,
   which visually read as two stacked panels instead of one). Sized like
   the homepage's own centered section headings. */
.uk-director-page-shell .uk-process-panel .uk-section-title {
  max-width: 640px;
  margin: 0 auto 28px;
}

.uk-director-cta {
  margin-bottom: 40px;
}

/* ---------- Hero ---------- */

/* "Director Service Address" is longer than this shared hero's other
   headings (e.g. "Registered Office Address"), so it needs a slightly
   wider copy column and smaller clamp to keep to two clean lines
   instead of wrapping into three with an orphaned word. Scoped to
   desktop widths only so it doesn't outrank the shared 1-column
   mobile/tablet stacking rule (higher specificity would otherwise win
   regardless of source order). */
@media (min-width: 981px) {
  .uk-director-page-shell .uk-service-hero {
    grid-template-columns: 48% 52%;
  }
}

.uk-director-page-shell .uk-service-copy h1 {
  font-size: clamp(32px, 3.4vw, 44px);
}

.uk-director-hero-features {
  display: grid;
  grid-template-columns: repeat(4, max-content);
  gap: 22px;
  margin: 4px 0 26px;
}

.uk-director-hero-features div {
  display: grid;
  justify-items: center;
  text-align: center;
  gap: 8px;
  width: 108px;
}

.uk-director-hero-features .round-icon {
  width: 44px;
  height: 44px;
  font-size: 20px;
}

.uk-director-hero-features p {
  margin: 0;
  color: #dce8ff;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.35;
}

.uk-director-visual {
  position: relative;
  min-height: 380px;
}

.uk-director-visual img {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 14px;
  object-fit: cover;
  object-position: center;
  box-shadow: 0 22px 55px rgba(0, 0, 0, .3);
}

/* ---------- Info strip ---------- */

.uk-director-info-strip {
  padding: 22px 26px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px;
  border: 1px solid rgba(54, 213, 255, .4);
  border-radius: 12px;
  background: rgba(6, 20, 52, .5);
}

.uk-director-info-strip article {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}

.uk-director-info-strip .round-icon {
  flex: 0 0 auto;
  width: 42px;
  height: 42px;
  font-size: 20px;
}

.uk-director-info-strip h3 {
  margin: 0 0 4px;
  font-size: 15px;
  font-weight: 800;
}

.uk-director-info-strip p {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
}

/* ---------- Privacy info panel ---------- */

.uk-director-privacy .check-list {
  margin-top: 18px;
}

/* ---------- Pricing band ---------- */

.uk-director-price-band {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 34px;
  padding: 28px 34px;
}

.uk-director-price-head {
  display: flex;
  align-items: flex-start;
  gap: 18px;
}

.uk-director-price-head h2 {
  margin: 0 0 4px;
  font-size: 20px;
  font-weight: 900;
}

.uk-director-price-head p {
  margin: 0 0 6px;
  color: var(--muted);
  font-size: 13px;
}

.uk-director-price-head .uk-price {
  margin: 0;
  font-size: 34px;
  line-height: 1;
  font-weight: 900;
}

.uk-director-price-head .uk-price span {
  font-size: 15px;
  font-weight: 700;
  color: var(--muted);
}

.uk-director-price-band .check-list {
  columns: 1;
  font-size: 13px;
}

.uk-director-price-band .btn {
  white-space: nowrap;
}

/* ---------- Process ---------- */

/* Wraps the shared .uk-process-mini grid in a glass-card panel so "How It
   Works" reads as its own section, matching the boxed-process treatment
   used on the site's established UK service pages (e.g. address-steps on
   uk-registered-office-address.html). The inner .uk-process-mini element
   is left completely unpadded/unstyled so its own dotted connector line
   (positioned relative to itself) stays correctly aligned. */
.uk-process-panel {
  padding: 30px 34px;
}

/* ---------- FAQ ---------- */

.uk-director-faq-heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
}

.uk-director-faq-heading .eyebrow {
  margin: 0;
}

.uk-director-faq-heading a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--cyan);
  font-size: 14px;
  font-weight: 700;
  white-space: nowrap;
}

.uk-director-faq {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px 20px;
}

.uk-director-faq details {
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  background: rgba(6, 20, 52, .5);
}

.uk-director-faq summary {
  min-height: 52px;
  padding: 0 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  list-style: none;
  cursor: pointer;
  color: #f5f9ff;
  font-size: 15px;
  font-weight: 600;
}

.uk-director-faq summary::-webkit-details-marker {
  display: none;
}

.uk-director-faq summary::after {
  content: "+";
  flex: 0 0 auto;
  color: var(--cyan);
  font-size: 20px;
  font-weight: 800;
}

.uk-director-faq details[open] summary::after {
  content: "\2212";
}

.uk-director-faq p {
  margin: 0;
  padding: 0 18px 16px;
  color: var(--muted);
  font-size: 13.5px;
  line-height: 1.55;
}

/* ---------- Responsive ---------- */

@media (max-width: 980px) {
  .uk-director-hero-features {
    grid-template-columns: repeat(4, 1fr);
    width: 100%;
  }

  .uk-director-visual {
    min-height: 320px;
  }

  .uk-director-info-strip {
    grid-template-columns: repeat(2, 1fr);
  }

  .uk-director-price-band {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .uk-director-price-head {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .uk-director-price-band .check-list {
    text-align: left;
    width: max-content;
    margin: 0 auto;
  }
}

@media (max-width: 620px) {
  .uk-director-visual {
    min-height: 260px;
  }

  .uk-director-hero-features {
    grid-template-columns: repeat(2, 1fr);
  }

  .uk-director-info-strip {
    grid-template-columns: 1fr;
  }

  .uk-director-info-strip article {
    align-items: center;
  }

  .uk-director-faq {
    grid-template-columns: 1fr;
  }

  .uk-director-faq-heading {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
  }
}