/* ============================================================================
   hero-banner.css — Ellys profile banner
   ----------------------------------------------------------------------------
   Same layout as the bycaridadgoncalves.com hero (client request): copy on the
   left, cut-out portrait centred over concentric rings and an outlined name,
   credential card + two buttons on the right, a four-up stats strip below.
   Stacks to portrait / copy / card / buttons / stats on phones.

   The template pins html to 62.5% (1rem = 10px), so everything here is px.
   Fonts: the site's own Big Shoulders Display (headings, numbers) and Archivo
   (text) from tokens.css, plus Mrs Saint Delafield for the "by Mayling Huang"
   signature line.
   ========================================================================== */

@font-face { font-family: 'Mrs Saint Delafield'; src: url('../fonts/MrsSaintDelafield-400.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }

.eh-hero {
  --paper: #3B2E29;
  --ink: #F7F1EC;
  --edge: rgb(59 46 41 / 0.32);
  --soft: rgb(59 46 41 / 0.72);
  --line: rgb(59 46 41 / 0.16);
  --eh-serif: var(--font-display);   /* Big Shoulders Display */
  --eh-sans: var(--font-text);       /* Archivo */
  --eh-script: 'Mrs Saint Delafield', 'Brush Script MT', cursive;
  --eh-gutter: clamp(20px, 5vw, 80px);

  position: relative;
  overflow: hidden;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  min-height: max(760px, 100vh);
  padding: var(--header-full, 110px) var(--eh-gutter) 0;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--eh-sans);
  font-size: 16px;
  text-align: left;
}
.eh-hero *, .eh-hero *::before, .eh-hero *::after { box-sizing: border-box; }
/* low-specificity reset (:where) so the template's global p / h1 styles don't leak in,
   while every component rule below still wins */
:where(.eh-hero) :where(p, h1, ul, li) { margin: 0; padding: 0; text-transform: none; letter-spacing: normal; font-weight: 400; }

/* soft light behind the portrait */
.eh-hero::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: 50%;
  top: 44%;
  width: min(1100px, 90vw);
  aspect-ratio: 1 / 1;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgb(201 161 150 / 0.17) 0%, rgb(255 255 255 / 0.69) 38%, transparent 66%);
}

/* outlined name behind everything */
.eh-hero__word {
  position: absolute;
  z-index: -1;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -58%);
  white-space: nowrap;
  pointer-events: none;
  font-family: var(--eh-serif);
  font-size: 27vw;
  font-weight: 200;
  line-height: 1;
  letter-spacing: .01em;
  text-transform: uppercase;
  color: transparent;
  -webkit-text-stroke: 1px rgb(59 46 41 / 0.22);
}

.eh-hero__body {
  flex: 1 1 0%;
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  column-gap: clamp(16px, 2.2vw, 40px);
  align-items: end;
}

/* ---- copy ---- */
.eh-hero__copy { align-self: center; padding: 40px 0 80px; position: relative; z-index: 2; }
.eh-badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 9px 16px;
  border: 1px solid var(--edge);
  border-radius: 999px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--paper);
}
.eh-badge__dot { width: 6px; height: 6px; border-radius: 50%; background: var(--paper); }
.eh-hero__title {
  margin: 26px 0 0;
  max-width: 10em;
  font-family: var(--eh-serif);
  font-weight: 200;
  font-size: clamp(48px, 4.1vw, 74px);
  line-height: .94;
  letter-spacing: .01em;
  text-transform: uppercase;
  color: var(--paper);
}
.eh-hero__accent {
  display: block;
  margin-top: .16em;
  font-family: var(--eh-script);
  font-size: .8em;
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0;
  text-transform: none;
  color: var(--paper);
}
.eh-hero__lead { margin-top: 24px; max-width: 26em; font-size: 16px; line-height: 1.7; color: var(--soft); }

/* ---- portrait ---- */
.eh-hero__visual { position: relative; align-self: end; display: flex; justify-content: center; margin: -10px 0 -120px; }
.eh-hero__visual picture { position: relative; z-index: 1; display: block; width: auto; }
.eh-hero__portrait {
  display: block;
  height: min(calc(100vh - var(--header-full, 110px) + 30px), 900px);
  min-height: 640px;
  width: auto;
  max-width: 100%;
  margin: 0 auto;
  object-fit: contain;
  object-position: center bottom;
  -webkit-mask-image: linear-gradient(#000 82%, transparent 100%);
  mask-image: linear-gradient(#000 82%, transparent 100%);
}
/* golden-ratio motif: golden rectangles + spiral, the spiral's eye placed at
   her brow line (she maps brows with golden-ratio calipers) */
.eh-phi {
  position: absolute;
  z-index: 0;
  left: 50%;
  top: 19%;
  height: 112%;
  width: auto;
  max-width: none;
  transform: translate(-30.1%, -28.7%);   /* eye of the spiral -> (left, top) */
  overflow: visible;
  pointer-events: none;
}
.eh-phi__grid rect { fill: none; stroke: rgb(59 46 41 / 0.085); stroke-width: 1; vector-effect: non-scaling-stroke; }
.eh-phi__spiral { fill: none; stroke: rgb(201 161 150 / 0.55); stroke-width: 1.2; vector-effect: non-scaling-stroke; stroke-dasharray: 1; stroke-dashoffset: 0; }
.eh-phi__dots circle { fill: #B9877A; opacity: .8; }
@media (prefers-reduced-motion: no-preference) {
  .eh-phi__spiral { animation: eh-draw 3.6s cubic-bezier(.45, 0, .2, 1) .4s both; }
  .eh-phi__dots circle { animation: eh-fade 1s ease 3.4s both; }
  @keyframes eh-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
  @keyframes eh-fade { from { opacity: 0; } to { opacity: .8; } }
}

/* ---- credential + buttons ---- */
.eh-hero__aside { place-self: center end; width: 100%; max-width: 340px; padding-bottom: 40px; position: relative; z-index: 2; }
.eh-cred { display: flex; gap: 16px; padding: 22px; border: 1px solid var(--edge); background: rgb(247 241 236 / 0.55); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.eh-cred__icon { flex: 0 0 auto; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; border: 1px solid var(--edge); color: var(--paper); }
.eh-cred__title { margin-bottom: 8px; font-family: var(--eh-serif); font-weight: 200; font-size: 26px; line-height: 1; letter-spacing: .02em; text-transform: uppercase; color: var(--paper); }
.eh-cred__text { font-size: 13.5px; line-height: 1.6; color: var(--soft); }
.eh-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 18px; }
.eh-btn {
  flex: 1 1 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 52px;
  padding: 0 30px;
  border: 1px solid var(--edge);
  border-radius: 0;
  font-family: var(--eh-sans);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .24em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--paper);
  transition: background-color .3s, border-color .3s, color .3s;
}
.eh-btn:hover { border-color: rgb(59 46 41 / 0.7); background: rgb(255 255 255 / 0.69); }
.eh-btn--solid { background: var(--paper); border-color: var(--paper); color: var(--ink); }
.eh-btn--solid:hover { background: transparent; border-color: rgb(59 46 41 / 0.7); color: var(--paper); }
.eh-btn:focus-visible { outline: 1px solid var(--paper); outline-offset: 3px; }

/* ---- stats strip ---- */
.eh-stats {
  position: relative;
  z-index: 2;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  border-top: 1px solid var(--line);
  margin: 0;
  padding: 26px 0 34px;
  background: linear-gradient(to top, var(--ink) 55%, rgb(247 241 236 / 0.75) 80%, transparent);
}
.eh-stats li { display: flex; align-items: baseline; gap: 14px; color: var(--soft); }
.eh-stats strong { font-family: var(--eh-serif); font-weight: 200; font-size: clamp(42px, 3.6vw, 62px); line-height: 1; color: var(--paper); }
.eh-stats span { font-size: 11px; font-weight: 500; letter-spacing: .18em; text-transform: uppercase; line-height: 1.5; color: var(--soft); }

/* ---- tablet ---- */
@media (max-width: 1024px) {
  .eh-hero { min-height: 0; }
  .eh-hero__body { grid-template-columns: 1fr minmax(0, 52%); grid-template-areas: "copy visual" "aside visual"; column-gap: 28px; }
  .eh-hero__copy { grid-area: copy; align-self: end; padding: 60px 0 0; }
  .eh-hero__visual { grid-area: visual; margin: 0; }
  .eh-hero__visual picture { width: 100%; }
  .eh-hero__aside { grid-area: aside; place-self: start; max-width: 380px; padding: 28px 0 50px; }
  .eh-hero__title { font-size: clamp(44px, 6vw, 60px); }
  .eh-hero__portrait { height: auto; width: 100%; min-height: 0; max-height: 820px; }
  .eh-stats { grid-template-columns: repeat(2, 1fr); background: none; }
}

/* ---- phone ---- */
@media (max-width: 767px) {
  .eh-hero { padding-top: calc(var(--header-full, 90px) + 10px); }
  .eh-hero::before { top: 24%; width: 130vw; }
  .eh-hero__word { top: 26%; font-size: 40vw; }
  .eh-hero__body { display: flex; flex-direction: column; align-items: center; text-align: center; }
  .eh-hero__visual { order: 1; width: 118%; margin: 0 -9%; }
  .eh-hero__portrait { max-height: 78vh; width: 100%; height: auto; margin: 0 auto; }
  .eh-phi { top: 17%; height: 104%; }
  /* align-self resets: the tablet rules above set end/start, which push the
     blocks to one side once the body becomes a centred flex column */
  .eh-hero__copy { order: 2; padding: 0; margin-top: -40px; align-self: center; width: 100%; max-width: 560px; }
  .eh-badge { font-size: 10px; letter-spacing: .2em; padding: 7px 13px; }
  .eh-hero__title { font-size: clamp(40px, 11vw, 56px); margin: 18px auto 0; max-width: 11em; }
  .eh-hero__lead { font-size: 15px; margin: 16px auto 0; }
  .eh-hero__aside { order: 3; align-self: center; width: 100%; max-width: 560px; justify-self: auto; padding: 26px 0 36px; }
  .eh-cred { text-align: left; padding: 18px; }
  .eh-actions .eh-btn { flex: 1 1 100%; }
  .eh-stats { grid-template-columns: 1fr 1fr; gap: 22px 16px; padding: 24px 0 30px; }
  .eh-stats li { flex-direction: column; gap: 6px; }
  .eh-stats span { font-size: 10px; letter-spacing: .14em; }
}



/* Buttons stay on one line (client request). Tighter padding and tracking
   keep "Book a consultation →" inside the 340px aside and on 320px phones. */
.eh-btn { white-space: nowrap; padding: 0 22px; }
.eh-actions .eh-btn--solid { flex-basis: 100%; }
@media (max-width: 400px) { .eh-btn { letter-spacing: .18em; padding: 0 16px; } }