/* ---------------------------------------------------------------------------
   /home2 only: the alternative homepage opening (.ea-open) and the hero call
   to action (.ea-hero-cta).

   AN EXPERIMENT, and deliberately its own file. /home2 is a second, noindexed
   copy of the homepage that exists so the opening can be compared against the
   live one side by side. Nothing in here is enqueued anywhere else, so the real
   front page cannot be reached by any of it. When the experiment ends this file
   and its one gate in functions.php are the whole cleanup.

   THE MODAL IS NO LONGER PART OF THAT. The dialog the hero button opens lives
   in assets/css/contact-modal.css and assets/js/contact-modal.js now, because
   the floating "Get in touch" control on the real front page opens the same
   one. Removing /home2 must not remove it. See the note at the foot of this
   file.

   WHAT .ea-open REPLACES. The live homepage opens with four sections between
   the hero video and the Market Watch band:

     1. a centred statement, "Discreetly Representing Exceptional Real Estate",
        with a small photograph, the founders paragraph and one button
     2. the four figures, laid out two up with a hole in the middle
     3. a full-bleed photograph with no content in it at all
     4. the bio paragraphs and a second button

   Four bands, four grounds, four scroll stops, one idea. This is all of it in
   one section: the statement and the prose on the left, the four figures
   stacked on the right. The copy is the same copy, minus the sentence that
   repeated the heading and the ranking. No figure was changed.

   THE FIGURES MOVED, and that is the second pass, not the first. The first cut
   put a photograph in the right column and the figures in a row underneath
   both columns. Zeve: "i feel like you buried the leed with the stats by
   putting them where u did rather than to the right stacked where that random
   photo is." A row under a two column block is a footer to the section. The
   figures are the proof the section exists to offer, so they are the column
   now, and the photograph is gone rather than shrunk into a decoration: see
   the note in scripts/build_home2_page.php for the three reasons.

   Type, colour and spacing come entirely from the tokens sitewide.css defines
   (--eabc-ink / --eabc-paper / --eabc-sand / --eabc-muted, Cormorant Garamond
   for headings, EB Garamond for prose, Hanken Grotesk for labels), which is why
   this stylesheet is enqueued with elevated-sitewide as a dependency. The
   5.5rem / 6vw padding, the 1180px field, the 2.9rem Cormorant title, the
   1px rgba(0,0,0,.16) hairline and the 767px breakpoint are the ones the four
   sections below it already use. No new colour, face or spacing step.

   GROUND. --eabc-paper: the hero above is dark video and the Market Watch band
   below is --eabc-sand, so the alternation the rest of the page runs on is
   unbroken.

   Every property the ported Squarespace bundle also sets globally (font,
   margin, colour, text-align) is stated explicitly. Per-section <style> blocks
   inside the page's post_content come LATER in the document than this file, so
   anything left to inherit is a rule someone else gets to win.
   --------------------------------------------------------------------------- */

.ea-open{padding:5.5rem 6vw;background:var(--eabc-paper,#fafafa);
  color:var(--eabc-ink,#2e2e2f)}
.ea-open__inner{max-width:1180px;margin:0 auto}

/* --- Statement and figures ----------------------------------------------- */

/* minmax(0,...) on both tracks and not 1fr / 1fr: an fr track has an auto
   minimum, and "RANKED BY WSJ REALTRENDS 2025" set at .16em tracking is a long
   unbreakable-looking run. Without the explicit zero minimum a label like that
   can push the page sideways, which is how horizontal overflow gets onto this
   site.

   1.05 / 0.95 rather than even halves: the prose is the wider job. At 1440 that
   is a 578px measure for the copy, within a pixel or two of the 558px it had
   when a photograph was in the other column, so nothing about the paragraph
   rag has to be re-judged.

   align-items:start, NOT center. With a photograph on the right, centring sat
   the shorter column against the middle of the image. With four figures on a
   rule, the first rule wants to be level with the top of the heading: the two
   columns start together and the eye reads across. Their measured heights at
   1440 are 445px of copy against 431px of figures, so nothing hangs. */
.ea-open__cols{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  gap:2.6rem 5rem;align-items:start;margin:0}

.ea-open__copy{min-width:0}

/* Left aligned, not centred. The live version centres a two line heading over
   a 620px measure and the eye has to find the start of every line; this is the
   same type at the same size against one edge. */
.ea-open__title{margin:0 0 1.4rem;text-align:left;
  font-family:"Cormorant Garamond",var(--heading-font-font-family),Georgia,serif;
  font-weight:400;font-size:2.9rem;line-height:1.08;letter-spacing:-.005em;
  color:var(--eabc-ink,#2e2e2f)}

/* The first paragraph is ink at reading size: it is the sentence that says who
   the firm is. The second is muted, the same relationship .ea-hood__title and
   .ea-hood__intro have one section down. */
.ea-open__lede{margin:0 0 1rem;text-align:left;
  font-family:"EB Garamond",var(--body-font-font-family),Georgia,serif;
  font-size:1.15rem;line-height:1.6;color:var(--eabc-ink,#2e2e2f)}

.ea-open__body{margin:0 0 2rem;text-align:left;
  font-family:"EB Garamond",var(--body-font-font-family),Georgia,serif;
  font-size:1.05rem;line-height:1.6;color:var(--eabc-muted,rgba(0,0,0,.58))}

/* One button and one link, not two buttons. The live page gives the portfolio
   and the team a filled pill each, in two different sections; side by side they
   would read as equal weight and neither would be the thing to do next.
   flex-wrap so the pair stacks rather than widening the page when the column
   runs out of room. */
.ea-open__actions{display:flex;flex-wrap:wrap;align-items:center;gap:.9rem 1.6rem;
  margin:0}

/* Same size, tracking and underline as .ea-mw__archive and .ea-hcontact__more,
   which are the secondary ways out of the two sections below this one. */
.ea-open__more{font-family:var(--primary-button-font-font-family,"Hanken Grotesk"),system-ui,sans-serif;
  font-size:.8rem;font-weight:400;line-height:1.5;letter-spacing:.02em;
  color:var(--eabc-ink,#2e2e2f);text-decoration:none;
  border-bottom:1px solid rgba(46,46,47,.28)}
.ea-open__more:hover,
.ea-open__more:focus-visible{color:var(--eabc-ink,#2e2e2f);
  border-bottom-color:var(--eabc-ink,#2e2e2f);text-decoration:none}
.ea-open__more:focus-visible{outline:2px solid var(--eabc-ink,#2e2e2f);outline-offset:3px}

/* --- The figures --------------------------------------------------------- */

/* A COLUMN, and re-measured for it rather than inherited from the row.
   Four across, each figure had a quarter of 1180px to sit in and 1.9rem was
   as large as "$500+ Million" could go. Stacked, each one has the full 523px
   of the right column, and 1.9rem in that much space reads as a caption. The
   sizes below are the column's, not the row's:

     figure  1.9rem  ->  2.35rem   still under the 2.9rem heading, so the
                                   statement stays the largest thing in the
                                   section and the figures are second
     rule to figure  1.1rem -> 1.25rem
     figure to label  .45rem -> .5rem
     stat to stat    1.6rem -> 1.75rem   a row needed only a column gap; a
                                         stack needs the gap between two stats
                                         to be visibly larger than the gap
                                         inside one, or the eight lines read as
                                         one list of eight

   That comes to 431px against the copy column's 445px at 1440. The hairline is
   the 1px rgba(0,0,0,.16) .ea-kc__card uses where there is no photograph to
   carry a card, and it now runs the full width of the column, which is what
   makes the stack read as a set. */
.ea-open__stats{display:grid;grid-template-columns:minmax(0,1fr);
  gap:1.75rem;margin:0;padding:0;list-style:none;min-width:0}

.ea-open__stat{margin:0;padding:1.25rem 0 0;min-width:0;
  border-top:1px solid rgba(0,0,0,.16)}

/* The divider convention: see THE HAIRLINE RULE at the top of sitewide.css. One
   column here, so N is 1 and only the first figure loses its rule; the three
   that remain are the ones between the four. The 1.25rem top padding stays on
   the first stat, so the stack keeps the top it was measured against the copy
   column with and nothing reflows.

   Restated in the 1023px block below, where the stats go two up and N becomes
   2. No restore is needed there, unlike .ea-hood__item and .ea-kc__card: N only
   ever GROWS on this component, so the set of suppressed items only ever grows
   with it and never has to give an item its rule back. */
.ea-open__stat:first-child{border-top:0}

.ea-open__figure{margin:0 0 .5rem;text-align:left;
  font-family:"Cormorant Garamond",var(--heading-font-font-family),Georgia,serif;
  font-weight:400;font-size:2.35rem;line-height:1.1;letter-spacing:-.005em;
  color:var(--eabc-ink,#2e2e2f);overflow-wrap:break-word}

/* The live markup sets the "+" and the "1" in an <em>, which is what gives the
   figures their one italic accent. Kept, so the numbers read the way they do
   on the real homepage. */
.ea-open__figure em{font-style:italic}

.ea-open__label{margin:0;text-align:left;
  font-family:var(--primary-button-font-font-family,"Hanken Grotesk"),system-ui,sans-serif;
  font-size:.68rem;font-weight:400;line-height:1.5;text-transform:uppercase;
  letter-spacing:.16em;color:var(--eabc-muted,rgba(0,0,0,.58));
  overflow-wrap:break-word}

/* --- Narrow -------------------------------------------------------------- */

/* 1023px, and it was 900px until the columns were measured.

   The constraint is the PROSE, not the figures. The two columns stop being two
   columns as soon as the copy track is too narrow to read, and with the figures
   beside it the copy track is 1.05 of (viewport minus two 6vw gutters minus the
   5rem gap). Measured heights of the two columns, left against right:

      901px   374px measure   658 / 431   227px of copy hanging past the stack
     1024px   431px measure   501 / 431    70px
     1280px   549px measure   445 / 431    14px

   374px of EB Garamond at 1.15rem is 46 characters, which is a caption measure
   and not a paragraph one, and the 227px of dangling copy is what it looks like
   from across the room. 1024px is where it comes right, and it is also where
   .ea-hood__grid and .ea-bldg__grid below already fold, so the whole page
   changes shape at one width instead of two.

   The figures go TWO UP once they are under the prose rather than beside it.
   Stacked, four of them add 431px of scroll to a phone for eight short lines,
   and on a narrow screen they are not competing with anything for attention,
   which is the thing the column was fixing. Two up is the shorter rhythm. */
@media (max-width:1023px){
  .ea-open__cols{grid-template-columns:1fr;gap:2.4rem}
  .ea-open__stats{grid-template-columns:repeat(2,minmax(0,1fr));gap:1.6rem 2rem}
  .ea-open__stat{padding-top:1.1rem}
  /* Two up, so the first row is now two items and both lose the rule. */
  .ea-open__stat:nth-child(-n+2){border-top:0}
  .ea-open__figure{font-size:1.9rem;margin-bottom:.45rem}
}

@media (max-width:767px){
  .ea-open{padding:3.5rem 6vw}
  .ea-open__title{font-size:2rem}
  .ea-open__lede{font-size:1.05rem}
  .ea-open__body{font-size:1rem;margin-bottom:1.8rem}
  .ea-open__stats{gap:1.4rem 1.5rem}
  .ea-open__figure{font-size:1.6rem}
}

/* The button stays the site's inline pill at every width the audit checks. Its
   2.2rem side padding plus "Luxury portfolio" only runs out of room below
   roughly 360px, so trim the padding there rather than let a label push the
   page sideways. */
@media (max-width:360px){
  .ea-open__actions .eabc-btn{padding-left:1.1rem;padding-right:1.1rem}
}

/* ===========================================================================
   The hero call to action.

   ONE button. Zeve asked for a CTA in the top banner, then narrowed it to
   "just do get in touch", so there is no second button and no secondary text
   link beside it.

   WHERE IT SITS. Inside the hero's own Fluid Engine grid, as a third item
   after the two text blocks, placed by grid-area exactly the way the bundle
   places the other two. Nothing is added above the hero and no section is
   added, so `main .page-regions:first-child .page-section:first-child` still
   selects the same element and the 130px header offset is untouched.

   The grid is 24 content columns at 768px and up (lines 2 to 26, centre line
   14) and 8 below it (lines 2 to 10, centre line 6). The two existing blocks
   are 5/11/7/17 and 7/11/9/17 on desktop, both centred on line 14; this takes
   the next free rows, 9 and 10, on a wider span centred on the same line. The
   rows are minmax(auto) and the two it uses are empty, so at 1440 the hero
   does not get any taller.

   LEGIBILITY. Measured, not eyeballed. Sampling the video across all 102
   quarter-second frames of its 25.3s inside the exact rectangle this button
   occupies, the background runs from relative luminance 0.0000 (t=1) to 0.8331
   (t=0.75). NOTHING drawn as text directly on that passes: white would be
   1.14:1 on the brightest pixel, ink 1.55:1 on the darkest. So the button is
   an opaque plate and the label never touches the video at all: ink #2e2e2f on
   paper #fafafa is 13.00:1, on every frame, forever.

   THE PLATE IS PAPER, ink text, and that is .eabc-btn with its own two tokens
   swapped, not a new button: same Hanken uppercase 1rem at .04em, same
   1.05rem/2.2rem padding, same 6.4px radius, same 1px border. The precedent is
   .ea-hoodfilter__btn and .ea-kcfilter__btn, which restyle .eabc-btn's fill and
   border from a page-scoped stylesheet for the same kind of reason. Paper
   rather than the stock ink fill because the measurement says the band is dark:
   at the brightest frame in the whole clip, 99% of the pixels behind the button
   are still below L=0.21.

   THE EDGE IS TWO TONE, paper fill inside a 1px ink border, so the control's
   boundary is never lost. Against a bright frame the ink border carries it
   (11.41:1 at L=0.8331); against a black frame the paper fill carries it
   (20.12:1 at L=0.0000). The two curves cross at L=0.229, where both are
   3.61:1, so the worst boundary contrast the clip can produce is 3.61:1 and
   WCAG 1.4.11 wants 3:1.

   The focus ring is built the same way and for the same reason: a paper ring
   inside an ink ring, so one half of it always has somewhere to show.
   =========================================================================== */

.ea-hero-cta{grid-area:11/2/13/10;z-index:4;
  display:flex;justify-content:center;align-items:flex-start;min-width:0}

@media (min-width:768px){
  .ea-hero-cta{grid-area:9/9/11/19;align-items:center}
}

.ea-hero-cta__btn{background:var(--eabc-paper,#fafafa);
  color:var(--eabc-ink,#2e2e2f);
  border:1px solid var(--eabc-ink,#2e2e2f);
  white-space:nowrap}

/* HOVER: the fill goes to sand. Zeve: "get in touch button hon homepage should
   have some hover state."

   IT HAD ONE AND IT WAS INVISIBLE. The old hover took paper #fafafa to #fff.
   In CIE lightness that is L* 98.28 to 100.00, a step of 1.72, on a plate
   already surrounded by near-black video. Paper to sand #dbd7ce is L* 98.28 to
   86.07, a step of 12.21: seven times the old one, and the only reason he could
   not see the first one.

   IT IS THE SITE'S OWN BUTTON HOVER, not a new interaction. Every button here
   moves its plate ONE STEP DARKER on hover and leaves the label colour alone:
   .eabc-btn goes ink #2e2e2f to #000, and .ea-hoodfilter__btn / .ea-topicfilter__btn
   go transparent to var(--eabc-sand). This is that second rule exactly, applied
   to the one button on the site whose resting plate is paper. Sand is the step
   below paper in the token set, so no new colour is introduced. The border
   stays ink rather than following the fill the way the filter pills' does, for
   the measurement below.

   AN INVERT WAS MEASURED AND REJECTED. Paper-on-ink is the obvious hover for an
   ink-on-paper plate and it scores identically on the WCAG numbers, because
   swapping which of {ink, paper} is fill and which is border does not change
   the pair. It fails on something those numbers do not catch. Re-measuring the
   clip in a 6px ring around this exact button rectangle, all 102 quarter-second
   frames, at both breakpoints, the video immediately outside the plate has a
   mean relative luminance of 0.0113 to 0.0712 at 1440x900 and 0.0251 to 0.0716
   at 390x844: it is dark everywhere, all the time. An ink plate on that surround
   is 1.26:1 to 1.57:1, so the body of the button would vanish into the video and
   the whole control would come down to its 1px border. A hero button that
   empties out under the cursor reads as broken, not as feedback. Sand on the
   same surround is 6.01:1 to 11.93:1, so the plate stays a solid bright
   rectangle on every frame, which is the entire reason the resting state is
   paper-filled in the first place.

   THE TWO NUMBERS THE RESTING STATE HOLDS, RE-MEASURED FOR THE HOVER, worst
   frame of 102, at 1440x900 and 390x844, not assumed:

     label     ink #2e2e2f on sand #dbd7ce      9.45:1   (was 13.00:1 on paper;
                                                          WCAG 1.4.3 wants 4.5:1)
     plate edge  worst ring pixel on any frame  3.07:1 at 1440, 3.08:1 at 390
                                                         (was 3.61:1 at both;
                                                          WCAG 1.4.11 wants 3:1)

   The edge figure is the two-tone one: sand fill inside a 1px ink border, so
   whichever tone contrasts against the frame carries the boundary and the
   plate's edge contrast is the better of the two. Sand and ink cross at
   L=0.1879, where both are 3.07:1, and that crossing is the floor for this
   pair no matter what the clip does. It is thinner headroom than the resting
   pair's 3.61:1 and it is worth knowing why: sand is darker than paper, so it
   crosses the ink curve lower down and closer to it. It still clears 3:1, and
   it is only reached by the top 1% of ring pixels on the darkest frame; against
   the ring MEAN the hovered edge never drops below 6.03:1.

   FOCUS SHARES THE FILL, which is what .ea-hoodfilter__btn does and the reason
   its hover and focus-visible are one selector: a keyboard gets the same
   affordance a mouse does, at the same moment. The two-tone ring is unchanged,
   and its tones are still {paper, ink} against the video, so its own worst-frame
   figure is still the resting state's 3.61:1. */
.ea-hero-cta__btn:hover,
.ea-hero-cta__btn:focus-visible{background:var(--eabc-sand,#dbd7ce);
  color:var(--eabc-ink,#2e2e2f);border-color:var(--eabc-ink,#2e2e2f);
  text-decoration:none}

.ea-hero-cta__btn:focus-visible{outline:2px solid var(--eabc-paper,#fafafa);
  outline-offset:2px;box-shadow:0 0 0 4px var(--eabc-ink,#2e2e2f)}

/* .eabc-btn ships `transition:background .2s ease` and this button inherits it.
   Scoped to this button rather than relaxed sitewide: the base transition is on
   170 other pages and is not this task's to change. */
@media (prefers-reduced-motion:reduce){
  .ea-hero-cta__btn{transition:none}
}

/* Narrow: the button becomes the full width of the grid cell rather than an
   inline pill, which is the same answer .ea-hood__cta and .ea-nbhd-related__cta
   reach by trimming padding. Full width is the stronger version of it here,
   because a hero button has the whole content column to itself and a label that
   cannot wrap must never be the thing that decides the page's width. */
@media (max-width:600px){
  .ea-hero-cta{display:block}
  .ea-hero-cta__btn{display:block;width:100%;text-align:center;
    padding-left:1.1rem;padding-right:1.1rem}
}

/* THE MODAL THIS BUTTON OPENS HAS MOVED to assets/css/contact-modal.css, and
   the script that builds it to assets/js/contact-modal.js. It is opened from
   the floating "Get in touch" control as well now, which is on the real front
   page too, so it is no longer a /home2 component and no longer belongs in a
   /home2 stylesheet. Nothing about the dialog itself changed. */