/* =========================================================================
   HOMEPAGE HERO — dark forest-green + line-art portrait
   -------------------------------------------------------------------------
   Loaded by mu-plugin dsa-hero-assets.php, NOT from the child theme's
   style.css: that file gets rewritten wholesale by other work on this site
   and took the hero's rules down with it on 2026-08-31. Keeping the hero in
   its own file makes it independent of who edits style.css next.

   The page content (page 35, a wp:html block) carries the markup; the layout
   has to live in CSS because an inline style cannot hold a media query.

   Illustration: uploads/2026/08/lineart-gold.png — the site's existing
   lineart-light.png recoloured to champagne (#D6B27C) and trimmed to its
   alpha bounding box (809x1284). Genuinely transparent, no baked backdrop.
   ========================================================================= */
.dsa-hero {
  position: relative;
  display: flex;
  flex-direction: column;
  background: #0D3B33;
  color: #F6F1E8;
  overflow: hidden; /* the tonal glow must never create horizontal scroll */
}

.dsa-hero__inner {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 clamp(18px, 4vw, 40px);
  display: grid;
  grid-template-columns: 46% 54%;
  align-items: stretch;
  min-height: 645px; /* + 70px strip = 715px hero, header excluded */
}

/* ---- left column: text, vertically centred ---- */
.dsa-hero__content {
  align-self: center;
  max-width: 540px;
  padding: clamp(48px, 5vw, 64px) clamp(20px, 2.5vw, 40px) clamp(48px, 5vw, 64px) 0;
}
.dsa-hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 22px;
  color: #D6B27C;
  font-size: 13px;
  letter-spacing: .24em;
  text-transform: uppercase;
  line-height: 1.2;
}
.dsa-hero__rule { width: 34px; height: 1px; background: rgba(214,178,124,.7); flex: none; }
.dsa-hero__title {
  font-family: var(--head);
  font-weight: 400;
  font-size: clamp(44px, 5.2vw, 70px);
  line-height: 1.06;
  letter-spacing: .01em;
  color: #F6F1E8;
  margin: 0 0 22px;
}
.dsa-hero__lead {
  font-size: 18px;
  line-height: 1.65;
  font-weight: 300;
  color: rgba(246,241,232,.86);
  margin: 0 0 34px;
  max-width: 430px;
}
.dsa-hero__actions { display: flex; gap: 14px; flex-wrap: wrap; }
.dsa-hero__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 0 30px;
  border-radius: 2px;
  font-family: var(--body);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  transition: background .25s, border-color .25s;
}
.dsa-hero__btn--primary { background: var(--accent); border: 1px solid var(--accent); color: #F6F1E8; }
.dsa-hero__btn--primary:hover,
.dsa-hero__btn--primary:focus-visible { background: var(--accent-deep); border-color: var(--accent-deep); }
.dsa-hero__btn--ghost { background: transparent; border: 1px solid rgba(246,241,232,.55); color: #F6F1E8; }
.dsa-hero__btn--ghost:hover,
.dsa-hero__btn--ghost:focus-visible { background: rgba(246,241,232,.12); border-color: #F6F1E8; }

/* ---- right column: illustration ----------------------------------------
   The artwork is a 520-560px display box pinned to the right of the column,
   not a narrow image floating in its middle. 22px of air above the hair, and
   the box's own aspect ratio (wider than the drawing) crops the lower body
   deliberately rather than letting the drawing simply run out.

   `height` is a percentage, not top+bottom: a replaced element with
   `height:auto` takes its intrinsic height and ignores `bottom`, so it would
   not stretch. The percentage resolves against the grid row, which has a
   definite height from `min-height` on .dsa-hero__inner.
   ------------------------------------------------------------------------ */
.dsa-hero__art {
  position: relative;
  min-width: 0;
}
.dsa-hero__art::before {
  content: "";
  position: absolute;
  z-index: 0;
  right: -80px;   /* centres the glow on the right-pinned artwork */
  bottom: -8%;
  width: min(115%, 720px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(58,136,118,.20) 0%, rgba(58,136,118,.10) 40%, rgba(13,59,51,0) 70%);
  pointer-events: none;
}
.dsa-hero__art-img {
  position: absolute;
  z-index: 1;
  right: 0;
  left: auto;
  top: 22px;
  height: calc(100% - 22px);
  width: min(560px, 100%);
  object-fit: cover;
  object-position: 50% 0;
}

/* ---- service strip, inside the bottom of the hero ---- */
.dsa-hero__strip { position: relative; z-index: 2; border-top: 1px solid rgba(214,178,124,.45); }
.dsa-hero__strip-list {
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 clamp(18px, 4vw, 40px);
  list-style: none;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}
.dsa-hero__strip-item {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 70px;
  margin: 0;
  color: rgba(246,241,232,.92);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.dsa-hero__strip-item svg { color: #D6B27C; flex: none; }
.dsa-hero__strip-item + .dsa-hero__strip-item::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 26px;
  background: rgba(214,178,124,.28);
}

/* ---- laptop / small desktop ---- */
@media (max-width: 1180px) {
  .dsa-hero__content { max-width: 470px; }
  .dsa-hero__lead { max-width: 380px; }
}
@media (max-width: 1024px) {
  .dsa-hero__inner { grid-template-columns: 46% 54%; min-height: 560px; }
  .dsa-hero__title { font-size: clamp(38px, 5.4vw, 52px); }
  .dsa-hero__lead { font-size: 17px; margin-bottom: 28px; }
  .dsa-hero__strip-item { font-size: 11px; letter-spacing: .12em; gap: 8px; }
}

/* ---- tablet & mobile: text first, illustration under the buttons --------
   `contain`, so the whole portrait is visible — head, hair, neck and
   shoulders — instead of the `cover` crop that used to cut the face's
   surroundings away at 320px.
   ------------------------------------------------------------------------ */
@media (max-width: 768px) {
  .dsa-hero__inner {
    grid-template-columns: 1fr;
    min-height: 0;
    padding-top: clamp(40px, 8vw, 56px);
  }
  .dsa-hero__content {
    align-self: auto;
    max-width: none;
    padding: 0 0 clamp(26px, 5vw, 34px);
  }
  .dsa-hero__title { font-size: clamp(42px, 11vw, 48px); }
  .dsa-hero__lead { font-size: 17px; max-width: 520px; margin-bottom: 30px; }
  .dsa-hero__btn { padding: 0 26px; }

  /* Fixed-height area: it reserves the space before the image loads, so the
     drawing never pops in and shifts the strip down. */
  .dsa-hero__art {
    width: 100%;
    margin: 0;
    height: clamp(340px, 92vw, 380px);
  }
  /* The ::before disc would show as a bright rectangle here, so the mobile
     glow is a background that fades to 0 before the box edge. */
  .dsa-hero__art::before { content: none; }
  .dsa-hero__art {
    background: radial-gradient(58% 44% at 50% 46%, rgba(58,136,118,.20) 0%, rgba(13,59,51,0) 100%);
  }
  .dsa-hero__art-img {
    right: 0;
    left: 0;
    top: 18px;
    height: calc(100% - 18px);
    width: 100%;
    object-fit: contain;
    object-position: 50% 50%;
  }

  /* Two-column grid, separators drawn per cell instead of per neighbour. */
  .dsa-hero__strip-list { grid-template-columns: repeat(2, 1fr); }
  .dsa-hero__strip-item { justify-content: flex-start; padding: 0 6px; min-height: 62px; }
  .dsa-hero__strip-item + .dsa-hero__strip-item::before { content: none; }
  .dsa-hero__strip-item:nth-child(even) { border-left: 1px solid rgba(214,178,124,.24); padding-left: 16px; }
  .dsa-hero__strip-item:nth-child(n+3) { border-top: 1px solid rgba(214,178,124,.24); }
}

@media (max-width: 400px) {
  .dsa-hero__actions { gap: 10px; }
  .dsa-hero__btn { padding: 0 20px; font-size: 12px; }
  .dsa-hero__strip-item { font-size: 10.5px; letter-spacing: .1em; gap: 7px; }
}