/* ---------------------------------------------------------------------------
   Homepage: neighborhoods (.ea-hood) and buildings (.ea-bldg).

   A separate file from sitewide.css on purpose. sitewide.css is the ported
   Squarespace "Custom CSS" and stays a record of what live had; anything built
   after the migration is easier to reason about, and to revert, on its own.

   Type and colour come entirely from the tokens sitewide.css defines
   (--eabc-ink / --eabc-paper / --eabc-sand / --eabc-muted, Cormorant Garamond
   for headings, Hanken Grotesk for labels), which is why this stylesheet is
   enqueued with elevated-sitewide as a dependency. No new colour, button or
   face is introduced here.

   The two sections alternate ground so they do not read as one long slab:
   Market Watch above is --eabc-sand, neighborhoods are --eabc-paper, buildings
   are --eabc-sand again, and the Instagram band below is white.

   THE GROUND USED TO BE THE ONLY DIFFERENCE, which was the problem. Both
   sections were six photographs in a three-up grid on an identical 4:3 crop
   with an identical button underneath, so they read as one section printed
   twice and cost 2,581px of homepage at 1440 between them.

   They now share only the band header. Below it:

     .ea-hood  an INDEX. No photographs. Every guide, one row each, name left
               and building count right over a hairline. Fifteen rows now fit
               in less height than six crops took.
     .ea-bldg  a RAIL. The photographs, in a row that scrolls sideways, twelve
               addresses with the next one peeking past the right edge.

   inc/blocks.php carries the editorial reasoning for the split. The band header
   is shared on purpose: Market Watch, the Knowledge Center cards and the
   Contact band all use the same eyebrow, centred Cormorant h2 and 620px intro,
   so it is a system and not a coincidence.

   Every property that Squarespace's bundle also sets globally (font, margin,
   colour, text-align) is stated explicitly. Per-section <style> blocks inside
   the homepage'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-hood,
.ea-bldg{padding:5.5rem 6vw;color:var(--eabc-ink,#2e2e2f)}
.ea-hood{background:var(--eabc-paper,#fafafa)}
.ea-bldg{background:var(--eabc-sand,#dbd7ce)}

.ea-hood__inner,
.ea-bldg__inner{max-width:1180px;margin:0 auto}

/* --- Section header --------------------------------------------------- */

.ea-hood__eyebrow,
.ea-bldg__eyebrow{margin:0 0 1.1rem;text-align:center;
  font-family:var(--primary-button-font-font-family,"Hanken Grotesk"),system-ui,sans-serif;
  font-size:.75rem;font-weight:400;text-transform:uppercase;letter-spacing:.16em;
  color:var(--eabc-muted,rgba(0,0,0,.58))}

.ea-hood__title,
.ea-bldg__title{margin:0 0 .8rem;text-align:center;
  font-family:"Cormorant Garamond",var(--heading-font-font-family),Georgia,serif;
  font-weight:400;font-size:2.4rem;line-height:1.15;color:var(--eabc-ink,#2e2e2f)}

.ea-hood__intro,
.ea-bldg__intro{max-width:620px;margin:0 auto 3.2rem;text-align:center;
  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))}

/* --- Neighborhoods: the index ------------------------------------------ */

/* Three columns of rows, filled left to right so the depth ranking reads as
   rows and DOM order matches reading order. No photographs, so a row costs one
   line of type and all fifteen guides fit in roughly half the height six crops
   needed.

   column-gap only: the rows are separated by the hairline, not by a gap, which
   is what makes a column read as a continuous list rather than as five detached
   tiles. */
.ea-hood__index{display:grid;grid-template-columns:repeat(3,1fr);
  column-gap:3rem;list-style:none;margin:0;padding:0}

/* The hairline .ea-kc__card and .ea-hcontact__item already use where there is
   no image to carry a row. min-width:0 stops a long unbroken name blowing a
   column past 100%, which is how horizontal overflow gets onto this site. */
.ea-hood__item{margin:0;padding: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.
   Three columns, so the first row is the first three items, and they lose the
   rule. Nothing draws a border-bottom, so the index is divided rather than
   boxed. Restated at 1024px below, where N becomes 2. */
.ea-hood__item:nth-child(-n+3){border-top:0}

/* The whole row is the link. */
.ea-hood__link{display:block;padding:.95rem 0;color:inherit;text-decoration:none}

.ea-hood__name{min-width:0;
  font-family:"Cormorant Garamond",var(--heading-font-font-family),Georgia,serif;
  font-weight:400;font-size:1.35rem;line-height:1.25;letter-spacing:-.005em;
  color:var(--eabc-ink,#2e2e2f);overflow-wrap:break-word}

.ea-hood__link:hover .ea-hood__name{text-decoration:underline;text-underline-offset:3px}
.ea-hood__link:focus-visible{outline:2px solid var(--eabc-ink,#2e2e2f);outline-offset:3px}

/* --- Buildings: the rail ------------------------------------------------ */

/* A nowrap flex row in a native scroll container, the same construction the
   Instagram feed uses at phone widths. Native means real momentum on a touch
   screen, links that stay in the tab order, and nothing to initialise.

   overscroll-behavior-x keeps a swipe that runs off the end of the row from
   turning into a page gesture or a browser back navigation.

   overflow-x makes this box clip, and .ea-bldg__link's focus ring is an OUTWARD
   outline that would be clipped with it, so 4px of side padding is the gutter
   that ring needs. scroll-padding matches, so the snap positions land on the
   padding edge and the left gutter is not scrolled away at rest.

   THE RAIL SCROLLS, THE PAGE DOES NOT: nothing here uses a negative margin to
   bleed past .ea-bldg__inner, so the widest thing on the page is still the
   section. */
.ea-bldg__rail{overflow-x:auto;overscroll-behavior-x:contain;
  scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch;
  padding:0 4px;scroll-padding:0 4px;margin:0 0 2.2rem;
  /* No scrollbar on the rail.
   *
   * Chrome on macOS draws overlay scrollbars that fade out, so this looked
   * clean in testing. It is a per machine setting, not a browser default:
   * System Settings > Appearance > Show scroll bars > Always, which is also
   * what macOS switches to on its own the moment a mouse is plugged in. With
   * that on, the overlay bar becomes a classic one that takes real layout
   * space, and a 1200px grey trough is drawn straight across the bottom of the
   * card row, directly under the architect line.
   *
   * Hiding it costs nothing here because the scroll affordance is carried
   * twice over already: the arrows below the rail, and the fourth card
   * deliberately peeking past the right edge. Keyboard scrolling, the arrows,
   * the snap points and the wheel are all untouched, only the painted bar
   * goes.
   *
   * Same treatment and same two properties the press ticker slides and the
   * Squarespace gallery carousel already use in sitewide.css, so this is the
   * house convention rather than a new idea.
   *
   * NOT applied to .ea-mwx__scroll on /market-watch: that box holds a wide
   * data table with no arrows and no peek, so its scrollbar is the only thing
   * telling a reader the table continues. */
  scrollbar-width:none;-ms-overflow-style:none}
.ea-bldg__rail::-webkit-scrollbar{display:none}

.ea-bldg__track{display:flex;flex-wrap:nowrap;gap:2rem;
  list-style:none;margin:0;padding:0}

/* flex-basis as a percentage of the scrollport, not a pixel width, so the row
   holds its shape across widths. At 27% three cards and their gaps fill about
   87% of the strip, which leaves roughly 40% of the fourth showing past the
   right edge. That peek is the affordance: a row whose last visible card ends
   flush with the edge reads as the end of the row.

   position: the card is the containing block for the stretched link below.
   min-width:0 stops a long unbroken address widening the card past its basis. */
.ea-bldg__card{position:relative;margin:0;min-width:0;
  flex:0 0 27%;scroll-snap-align:start}

/* Fixed ratio so a slab tower and a wide prewar facade sit on the same
   baseline. The <img> fills it and is cropped rather than letterboxed. */
.ea-bldg__media{overflow:hidden;border-radius:6.4px;background:rgba(0,0,0,.06);aspect-ratio:4/3}
.ea-bldg__media img{display:block;width:100%;height:100%;object-fit:cover;
  transition:transform .45s ease}

/* aspect-ratio is not honoured by every engine the ported bundle targets; the
   padding box keeps the crop from collapsing to zero where it is missing. */
@supports not (aspect-ratio:4/3){
  .ea-bldg__media{height:0;padding-bottom:75%;position:relative}
  .ea-bldg__media img{position:absolute;inset:0}
}

.ea-bldg__body{padding:1.1rem .1rem 0;text-align:left}

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

.ea-bldg__link{color:inherit;text-decoration:none}

/* Stretched link: one anchor per card, so the whole tile is clickable without
   nesting a second link inside the image or duplicating the destination for a
   screen reader. */
.ea-bldg__link::after{content:"";position:absolute;inset:0}

.ea-bldg__card:hover .ea-bldg__media img{transform:scale(1.04)}
.ea-bldg__card:hover .ea-bldg__link{text-decoration:underline;text-underline-offset:3px}
.ea-bldg__link:focus-visible{outline:2px solid var(--eabc-ink,#2e2e2f);outline-offset:3px}

/* --- Shared small caps and supporting line ------------------------------ */

/* The neighborhood on a building card. kc-archive.css cites this rule by
   name. Used to be shared with .ea-hood__meta, the building count on a
   neighborhood row, before that count came off the homepage section
   (2026-09-03); see elevated_home_neighborhoods() in inc/blocks.php. */
.ea-bldg__meta{margin:0 0 .5rem;
  font-family:var(--primary-button-font-font-family,"Hanken Grotesk"),system-ui,sans-serif;
  font-size:.68rem;font-weight:400;text-transform:uppercase;letter-spacing:.16em;
  color:var(--eabc-muted,rgba(0,0,0,.58))}

.ea-bldg__line{margin:.55rem 0 0;
  font-family:"EB Garamond",var(--body-font-font-family),Georgia,serif;
  font-size:.95rem;line-height:1.5;color:var(--eabc-muted,rgba(0,0,0,.58));
  overflow-wrap:break-word}

/* --- The rail's foot: the arrows, then the archive button --------------- */

/* Three tracks so the archive button stays optically centred in the section
   while the arrows sit at the left edge of the same line. The outer tracks are
   minmax(0,1fr) rather than 1fr: an fr track has an auto minimum, and at a
   width where the button and the arrows together are wider than the field that
   minimum is what pushes the page sideways.

   THE ARROWS ARE ON THE LEFT, AND THAT IS A COLLISION FIX RATHER THAN A TASTE.
   They used to be justify-self:end in track 3, which put them at x 1216..1310
   at 1440, the right edge of the 1180px content field. The floating "Get in
   touch" control (assets/css/contact-fab.css) is fixed at the bottom right of
   the viewport and occupies x 1274..1416, so while this row was in the last
   69px of the screen it covered 36 of the "next" arrow's 40px and the arrow
   could not be pressed.

   Moving the floating control instead was checked and cannot work: its left
   edge is viewport width minus 166, this field's right edge is half the
   viewport width plus 590, and those two do not clear each other below
   1512px. Shrinking the pill enough to clear would need it under 106px wide,
   and "Get in touch" at .8rem does not fit in that. So the arrows moved.

   Left is a real position, not a compromise. The row was already asymmetric,
   an optically centred button with weight on one side; it now has the weight
   on the other side, and prev-then-next still reads left to right. Measured
   after: the arrows sit at x 130..224 at 1440, 1050px clear of the floating
   control, and the clearance only grows with the viewport, so the overlap is
   gone at every width rather than suppressed for one scroll window.

   The markup order in inc/blocks.php was changed to match, arrows before
   button, so the tab order and the reading order agree with what is on
   screen. */
.ea-bldg__foot{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);
  align-items:center;gap:1rem}
.ea-bldg__cta{grid-column:2;margin:0;text-align:center}
.ea-bldg__nav{grid-column:1;justify-self:start;margin:0;white-space:nowrap}

/* Ink chevron inside a hairline circle, on sand. Drawn with currentColor and
   sized in the markup, so there is no icon font and no image to fail. */
.ea-bldg__arrow{display:inline-flex;align-items:center;justify-content:center;
  width:40px;height:40px;padding:0;margin:0;
  -webkit-appearance:none;appearance:none;background:transparent;
  border:1px solid rgba(0,0,0,.16);border-radius:50%;
  color:var(--eabc-ink,#2e2e2f);cursor:pointer}
.ea-bldg__arrow + .ea-bldg__arrow{margin-left:.6rem}
.ea-bldg__arrow svg{display:block}
.ea-bldg__arrow:hover:not(:disabled){border-color:var(--eabc-ink,#2e2e2f)}
.ea-bldg__arrow:focus-visible{outline:2px solid var(--eabc-ink,#2e2e2f);outline-offset:3px}
.ea-bldg__arrow:disabled{opacity:.3;cursor:default}

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

@media (max-width:1024px){
  .ea-hood__index{grid-template-columns:repeat(2,1fr);column-gap:2.4rem}
  /* N is 2 here, so the third item is now in the second row and wants its rule
     back. Restore before suppressing: equal specificity, source order decides.
     767px keeps two columns, so this carries down unchanged. */
  .ea-hood__item:nth-child(-n+3){border-top:1px solid rgba(0,0,0,.16)}
  .ea-hood__item:nth-child(-n+2){border-top:0}
  /* Two and a half cards rather than three and a half, so the crop does not
     shrink faster than the type on it. */
  .ea-bldg__card{flex:0 0 38%}
}

@media (max-width:767px){
  .ea-hood,
  .ea-bldg{padding:3.5rem 6vw}
  .ea-hood__title,
  .ea-bldg__title{font-size:1.75rem}
  .ea-hood__intro,
  .ea-bldg__intro{margin-bottom:2.2rem;font-size:1rem}

  /* Still two columns: a name is a short row, and fifteen of them in one
     column is a screen and a half of scrolling for a list. */
  .ea-hood__index{grid-template-columns:repeat(2,1fr);column-gap:1.6rem}
  .ea-hood__link{padding:.8rem 0}
  .ea-hood__name{font-size:1.15rem}

  /* One card and a wide peek. The peek is the whole invitation here: there are
     no arrows at this width, the finger is the control. */
  .ea-bldg__card{flex:0 0 76%}
  .ea-bldg__name{font-size:1.3rem}

  /* The arrows are for a mouse with no horizontal wheel. A touch screen has
     the swipe, so they come out and the button re-centres on its own. */
  .ea-bldg__foot{grid-template-columns:1fr}
  .ea-bldg__cta{grid-column:1}
  .ea-bldg__nav{display:none}
}

/* The button stays the site's inline pill at every width the audit checks. Its
   2.2rem side padding plus "All buildings" 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-bldg__cta .eabc-btn{padding-left:1.1rem;padding-right:1.1rem}
}

/* ---------------------------------------------------------------------------
   Knowledge Center, card layout (.ea-kc).

   Runs directly above the original Squarespace summary block so the two can be
   compared. Sand ground on purpose: the block below it sits on white, and two
   light sections stacked would have made the boundary between the candidates
   impossible to see.

   Text-only by design, and every card the same weight; see the note on
   elevated_kc_cards(). With no photograph to carry the card, the hairline rule
   does the work the image crop does in the neighborhood and building grids, and
   the type scale is the same one.
   --------------------------------------------------------------------------- */

.ea-kc{padding:5.5rem 6vw;background:var(--eabc-sand,#dbd7ce);color:var(--eabc-ink,#2e2e2f)}
.ea-kc__inner{max-width:1180px;margin:0 auto}

.ea-kc__eyebrow{margin:0 0 1.1rem;text-align:center;
  font-family:var(--primary-button-font-font-family,"Hanken Grotesk"),system-ui,sans-serif;
  font-size:.75rem;font-weight:400;text-transform:uppercase;letter-spacing:.16em;
  color:var(--eabc-muted,rgba(0,0,0,.58))}
.ea-kc__title{margin:0 0 .8rem;text-align:center;
  font-family:"Cormorant Garamond",var(--heading-font-font-family),Georgia,serif;
  font-weight:400;font-size:2.4rem;line-height:1.15;color:var(--eabc-ink,#2e2e2f)}
.ea-kc__intro{max-width:620px;margin:0 auto 3rem;text-align:center;
  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))}

/* Article cards. All equal weight: no lead item, no featured slot. */
.ea-kc__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:2.4rem 2rem;margin:0 0 3.2rem}
.ea-kc__card{position:relative;margin:0;min-width:0;padding:1.1rem 0 0;
  border-top:1px solid rgba(0,0,0,.16)}

/* The divider convention: see THE HAIRLINE RULE at the top of sitewide.css.
   Three columns, so the first row loses the rule and the rule left above row
   two is the one separating the two rows. Restated at each breakpoint below,
   where N becomes 2 and then 1.

   THE TOP PADDING GOES WITH THE RULE. It is there to hold a card's name off the
   hairline above it, so on the first row, which has no hairline, it is padding
   against nothing: 17.6px of empty space stacked under the section intro's own
   48px, and Zeve on the result: "too much white space below this paragraph".

   A previous note here argued the padding had to stay on row one or "the grid's
   rows would be knocked out of alignment". That is not what happens. All three
   cards in a row share the rule, so removing it lifts the whole row together
   and the rows stay internally aligned; the only thing that changes is that row
   one sits 17.6px higher, which is the entire point. What the note was
   protecting, every card's name sitting the same distance below its own rule,
   is still true afterwards, because a row with no rule has no such distance to
   match. */
.ea-kc__card:nth-child(-n+3){border-top:0;padding-top:0}
.ea-kc__name{margin:0;
  font-family:"Cormorant Garamond",var(--heading-font-font-family),Georgia,serif;
  font-weight:400;font-size:1.35rem;line-height:1.22;letter-spacing:-.005em;
  color:var(--eabc-ink,#2e2e2f);overflow-wrap:break-word}
.ea-kc__line{margin:.55rem 0 0;
  font-family:"EB Garamond",var(--body-font-font-family),Georgia,serif;
  font-size:.95rem;line-height:1.5;color:var(--eabc-muted,rgba(0,0,0,.58));
  overflow-wrap:break-word}

.ea-kc__link{color:inherit;text-decoration:none}
.ea-kc__link::after{content:"";position:absolute;inset:0}
.ea-kc__card:hover .ea-kc__link{text-decoration:underline;text-underline-offset:3px}
.ea-kc__link:focus-visible{outline:2px solid var(--eabc-ink,#2e2e2f);outline-offset:3px}

.ea-kc__cta{margin:0;text-align:center}

@media (max-width:1024px){
  .ea-kc__grid{grid-template-columns:repeat(2,1fr)}
  .ea-kc__card:nth-child(-n+3){border-top:1px solid rgba(0,0,0,.16);padding-top:1.1rem}
  .ea-kc__card:nth-child(-n+2){border-top:0;padding-top:0}
}

@media (max-width:767px){
  .ea-kc{padding:3.5rem 6vw}
  .ea-kc__title{font-size:1.75rem}
  .ea-kc__intro{margin-bottom:2.2rem;font-size:1rem}
  .ea-kc__grid{grid-template-columns:1fr;gap:1.8rem;margin-bottom:2.5rem}
  /* One column: N is 1, so only the very first card loses the rule. */
  .ea-kc__card:nth-child(-n+2){border-top:1px solid rgba(0,0,0,.16);padding-top:1.1rem}
  .ea-kc__card:first-child{border-top:0;padding-top:0}
}

@media (max-width:360px){
  .ea-kc__cta .eabc-btn{padding-left:1.1rem;padding-right:1.1rem}
}

/* ---------------------------------------------------------------------------
   Homepage closing band: Contact (.ea-hcontact).

   Rendered by [elevated_home_contact]; see inc/home-contact.php for what this
   replaced and why, and for what was deliberately left out of it.

   IT LIVES IN THIS FILE and not in a new one because this file is already
   enqueued unconditionally, which means the band needs no new enqueue and
   cannot render unstyled if it is ever dropped on another page. It is also
   where the four sections it now sits under are styled, and it borrows from
   all four: the 5.5rem / 6vw padding, the 1180px field, the small caps
   eyebrow, the 2.4rem centred Cormorant title, the 620px muted intro, the
   1px rgba(0,0,0,.16) hairline .ea-kc__card uses in place of a photograph, and
   the same 767px breakpoint. No new colour, face or spacing step.

   contact.css is NOT loaded on the homepage, so nothing here can be inherited
   from /contact and nothing here reaches it. The rhyme between the two pages is
   carried by the shared tokens, which is the reason the duplicated declarations
   below are duplicated rather than shared: one page's stylesheet has no
   business loading on 170 other URLs to save forty lines.

   GROUND. The Knowledge Center band directly above is --eabc-sand and the press
   ticker below is white, so this one is --eabc-paper: the alternation the whole
   sequence runs on, and the same value the old imported section painted, so the
   seam between this band and the footer does not move.
   --------------------------------------------------------------------------- */

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

/* --- Band header, the same one the three grids above use ---------------- */

.ea-hcontact__eyebrow{margin:0 0 1.1rem;text-align:center;
  font-family:var(--primary-button-font-font-family,"Hanken Grotesk"),system-ui,sans-serif;
  font-size:.75rem;font-weight:400;text-transform:uppercase;letter-spacing:.16em;
  color:var(--eabc-muted,rgba(0,0,0,.58))}

.ea-hcontact__title{margin:0 0 .8rem;text-align:center;
  font-family:"Cormorant Garamond",var(--heading-font-font-family),Georgia,serif;
  font-weight:400;font-size:2.4rem;line-height:1.15;color:var(--eabc-ink,#2e2e2f)}

.ea-hcontact__intro{max-width:620px;margin:0 auto 3rem;text-align:center;
  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))}

/* --- The two columns ---------------------------------------------------- */

/* minmax(0,...) on both tracks and not 1fr / 1.4fr: an fr track has an auto
   minimum, and the Tally iframe in the right one is a replaced element that
   will not shrink below its intrinsic width. Without the explicit zero minimum
   the right column pushes the page sideways, which is how horizontal overflow
   gets onto this site.

   1.4fr to the form for the reason /contact gives: Tally lays its name and
   email fields two up and they wrap to one column early, which is what makes
   the embed tall. The rail is text and wants the narrower measure anyway.

   align-items:start, so the shorter column does not stretch its hairlines down
   to meet the bottom of the form. */
.ea-hcontact__cols{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.4fr);
  gap:2.6rem 4rem;align-items:start;margin:0}

/* --- The rail ----------------------------------------------------------- */

.ea-hcontact__rail{min-width:0}
.ea-hcontact__list{list-style:none;margin:0;padding:0}

/* The hairline .ea-kc__card uses on a card with no image to carry it. Three
   rows, so the rule is what gives this column its rhythm and what ties it to
   the Knowledge Center grid immediately above. */
.ea-hcontact__item{margin:0;padding:1.1rem 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, so N is 1 and only the Email row loses its rule. There is no
   border-bottom under Office either: the two rules that remain are the ones
   between the three rows, and "More ways to reach us" is spaced off the list by
   its own 1.1rem margin rather than fenced off it by a rule. */
.ea-hcontact__item:first-child{border-top:0}

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

/* The value is the thing being reached for, so it is ink at reading size, not
   muted. overflow-wrap keeps a long inbox name inside a narrow column rather
   than widening the page. */
.ea-hcontact__value{margin:0;
  font-family:"EB Garamond",var(--body-font-font-family),Georgia,serif;
  font-size:1.15rem;line-height:1.45;font-weight:400;font-style:normal;
  text-align:left;color:var(--eabc-ink,#2e2e2f);overflow-wrap:break-word}
.ea-hcontact__address{font-style:normal}

/* Sand hairline under a link that has to read as reachable without becoming a
   button, the same one /contact and .ea-calc__note use. */
.ea-hcontact__value a{color:var(--eabc-ink,#2e2e2f);text-decoration:none;
  border-bottom:1px solid var(--eabc-sand,#dbd7ce)}
.ea-hcontact__value a:hover,
.ea-hcontact__value a:focus-visible{color:var(--eabc-ink,#2e2e2f);
  border-bottom-color:var(--eabc-ink,#2e2e2f);text-decoration:none}
.ea-hcontact__value a:focus-visible{outline:2px solid var(--eabc-ink,#2e2e2f);outline-offset:3px}

/* The hand-off to /contact. Same size, tracking and underline as
   .ea-mw__archive, which is the line that sits under the Market Watch button
   four sections up and does the same job. */
.ea-hcontact__more{margin:1.1rem 0 0;text-align:left;
  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-muted,rgba(0,0,0,.58))}
.ea-hcontact__more a{color:var(--eabc-ink,#2e2e2f);text-decoration:none;
  border-bottom:1px solid rgba(46,46,47,.28)}
.ea-hcontact__more a:hover,
.ea-hcontact__more a:focus-visible{border-bottom-color:var(--eabc-ink,#2e2e2f);text-decoration:none}
.ea-hcontact__more a:focus-visible{outline:2px solid var(--eabc-ink,#2e2e2f);outline-offset:3px}

/* --- The form column ---------------------------------------------------- */

/* elevated_native_contact_form() carries its own field styling (.ea-ncf__*,
   sitewide.css, shared with every other surface it's rolled out to). This
   column's only job is to give it the whole width and let it size to its
   own content, same as the Tally embed it replaced. */
.ea-hcontact__form{min-width:0}
.ea-hcontact .eabc-form{margin:0;max-width:100%}

/* Overrides the sitewide .eabc-fineprint centring: this column is left aligned
   against the form's own left edge. */
.ea-hcontact .eabc-fineprint{margin:.9rem 0 0;text-align:left}

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

/* One step earlier than the card grids above, for the reason /contact gives:
   those hold three equal columns and can go two up, this holds a form whose
   fields are two up INSIDE the iframe, and below roughly 900px the right column
   is too narrow for them before anything on our side has run out of room. */
@media (max-width:900px){
  .ea-hcontact__cols{grid-template-columns:1fr;gap:2.4rem}
}

@media (max-width:767px){
  .ea-hcontact{padding:3.5rem 6vw}
  .ea-hcontact__title{font-size:1.75rem}
  .ea-hcontact__intro{margin-bottom:2.2rem;font-size:1rem}
}

/* Press ticker heading.
 *
 * An h2 at eyebrow weight, not at band-title weight. The other bands on this
 * page pair a small tracked eyebrow with a large Cormorant title because they
 * have something to say; this band is six logos and only needs naming. Same
 * type, size, tracking and colour as .ea-hood__eyebrow so it reads as one of
 * the set rather than as a new thing.
 *
 * Bottom margin is 1.6rem rather than the 1.1rem the other eyebrows carry,
 * because those sit above a title that continues the thought and this one sits
 * above the logos themselves, with nothing between.
 */
.ea-press__eyebrow{margin:0 0 1.6rem;text-align:center;
  font-family:var(--primary-button-font-font-family,"Hanken Grotesk"),system-ui,sans-serif;
  font-size:.75rem;font-weight:400;text-transform:uppercase;letter-spacing:.16em;
  color:var(--eabc-muted,rgba(0,0,0,.58))}