/* Arrowhead Artists test page, scoped to Porto Child only. */
.artguild-arrowhead-artists, .artguild-arrowhead-artists * {
    box-sizing: border-box;
}
.artguild-arrowhead-artists {
    color: #172b4d;
    font-family: "Asap Condensed", Arial, Helvetica, sans-serif;
    padding: 24px 0 56px;
}
.artguild-arrowhead-artists .artguild-arrowhead-artists-shell {
    width: min(1200px, calc(100% - 30px));
    margin: 0 auto;
}
.artguild-arrowhead-artists h1, .artguild-arrowhead-artists h2, .artguild-arrowhead-artists p {
    margin-top: 0;
}
.artguild-arrowhead-artists a {
    text-decoration: none;
}
.artguild-arrowhead-artists button {
    appearance: none;
    -webkit-appearance: none;
    font-family: inherit;
}
.artguild-arrowhead-artists img {
    max-width: 100%;
    border: 0;
}
.artguild-arrowhead-artists .artguild-arrowhead-artists-header {
    width: 100%;
    margin: 0;
    padding: 0;
    text-align: center;
    line-height: 1.15;
    white-space: normal;
}
.artguild-arrowhead-artists .artguild-arrowhead-artists-title {
    margin: 0;
    font-size: clamp(30px, 3.2vw, 42px);
    font-weight: 600;
    line-height: 1.1;
}
.artguild-arrowhead-artists .title-accent {
    color: #ba2025;
    font-family: "Asap Condensed", sans-serif;
    font-size: 30px;
    font-weight: 600;
    letter-spacing: 0px;
    text-transform: uppercase;
}
.artguild-arrowhead-artists .title-rest {
    color: #000000;
    font-family: "Asap Condensed", sans-serif;
    font-size: 30px;
    font-weight: 400;
    letter-spacing: 0px;
    font-style: normal;
}
.artguild-arrowhead-artists .artguild-arrowhead-artists-actions {
    margin: 0 0 28px;
    text-align: right;
}
.artguild-arrowhead-artists .artguild-arrowhead-artists-gallery-link {
    display: inline-block;
    padding: 12px 24px;
    border-radius: 3px;
    background: #1f9e69;
    color: #fff;
    font-size: 15px;
    line-height: 1;
    text-decoration: none !important;
    transition: background-color .2s ease;
}
.artguild-arrowhead-artists .artguild-arrowhead-artists-gallery-link:hover, .artguild-arrowhead-artists .artguild-arrowhead-artists-gallery-link:focus-visible {
    background: #177b52;
    color: #fff;
}
.artguild-arrowhead-artists .artguild-arrowhead-artists-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 34px 28px;
}
.artguild-arrowhead-artists .artguild-arrowhead-artist-card {
    display: block;
    width: 100%;
    padding: 0;
    border: 0;
    background: transparent;
    color: #000;
    font: inherit;
    text-align: center;
    cursor: pointer;
}
.artguild-arrowhead-artists .artist-artwork-frame {
    display: flex;
    width: 100%;
    aspect-ratio: 1 / 1;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: #fff;
    margin-bottom: .5em;
}
.artguild-arrowhead-artists .artist-artwork-frame img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}
.artguild-arrowhead-artists .artist-artwork-unavailable {
    padding: 18px;
    color: #8491a0;
    font-size: 16px;
}
.artguild-arrowhead-artists .artguild-arrowhead-artist-name {
    display: block;
    color: #000;
    font-size: 20px;
    font-weight: 400;
    line-height: 1.15;
}
.artguild-arrowhead-artists .artguild-arrowhead-artist-card:hover .artguild-arrowhead-artist-name, .artguild-arrowhead-artists .artguild-arrowhead-artist-card:focus-visible .artguild-arrowhead-artist-name {
    color: #2c8f9c;
}
.artguild-arrowhead-artists .artguild-arrowhead-artist-card:focus-visible {
    outline: 3px solid rgba(19, 139, 148, .35);
    outline-offset: 5px;
}
.artguild-arrowhead-artists .artguild-arrowhead-artists-empty {
    padding: 24px;
    border: 1px solid #dce4ea;
    text-align: center;
}
/* Shared Arrowhead Gallery contact/address/hours line, below the artist
   grid. Reuses the same muted helper-text tone and teal link color already
   used elsewhere on this page (Gravity Form field descriptions and the bio
   /social links) -- no new box, border, or icon, kept subordinate to the
   artist cards above it. */
.artguild-arrowhead-artists .artguild-arrowhead-artists-gallery-info {
    margin: 28px 0 0;
    color: #52616b;
    font-size: 15px;
    line-height: 1.5;
    text-align: center;
}
.artguild-arrowhead-artists .artguild-arrowhead-artists-gallery-info a {
    color: #138b94;
    font-weight: 600;
}
.artguild-arrowhead-artists .artguild-arrowhead-artist-modal[hidden] {
    display: none;
}
/*
 * Full-screen overlay scrolling: the overlay itself is the scroll container
 * (position: fixed; inset: 0; overflow-y: auto) and the dialog never gets
 * its own scrollbar (overflow: visible; max-height: none; height: auto) --
 * the underlying page stays fixed via body.arrowhead-modal-open below.
 * Horizontal centering is done on the dialog (margin: 0 auto) rather than
 * with display:grid/place-items:center on the overlay, because centering a
 * taller-than-viewport child that way clips its top out of scroll reach.
 */
.artguild-arrowhead-artists .artguild-arrowhead-artist-modal {
    position: fixed;
    inset: 0;
    z-index: 100000;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 20px;
}
.artguild-arrowhead-artists .artguild-arrowhead-artist-modal-backdrop {
    /* Fixed, not absolute: stays viewport-sized even while the overlay
       above it scrolls, so it never uncovers the page behind it. */
    position: fixed;
    inset: 0;
    background: rgba(9, 25, 43, .68);
}
.artguild-arrowhead-artists .artguild-arrowhead-artist-modal-dialog {
    position: relative;
    width: min(1040px, 100%);
    margin: 0 auto;
    overflow: visible;
    max-height: none;
    height: auto;
    padding: 30px 34px;
    background: #fff;
    border-radius: 20px;
    box-shadow: 0 24px 70px rgba(9, 25, 43, .32);
}
/* Enquire view only: a narrower, focused contact-form dialog rather than
   the wide gallery-modal width the Artist view needs. Driven by the same
   .arrowhead-modal-mode-enquire class setModalMode() already toggles for
   aria-labelledby -- no separate state mechanism. On mobile min(800px,100%)
   already resolves to 100% (same as the Artist view's own min(1040px,100%)
   at that width), so no extra mobile override is needed here. */
.artguild-arrowhead-artists .artguild-arrowhead-artist-modal.arrowhead-modal-mode-enquiry .artguild-arrowhead-artist-modal-dialog {
    width: min(800px, 100%);
    padding-left: 32px;
    padding-right: 32px;
}
/* Sits in the same top-right corner the header row's content ends at (same
   offsets as the dialog's own padding), so it reads as part of the header
   rather than floating over it. */
.artguild-arrowhead-artists .artguild-arrowhead-artist-modal-close {
    position: absolute;
    top: 24px;
    right: 44px;
    z-index: 10;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: #172b4d;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
}
.artguild-arrowhead-artists .artguild-arrowhead-artist-modal-close:hover, .artguild-arrowhead-artists .artguild-arrowhead-artist-modal-close:focus-visible {
    background: rgba(23, 43, 77, .06);
    color: #ba2025;
}
/* 1. Header: bold/red name + "| an Arrowhead Gallery Artist", centered as
   one block across the full modal width, with the gold divider directly
   below it. Symmetric left/right padding (not padding-right only) is what
   makes the centering genuine -- the close X is a separate, absolutely
   positioned element (see .artguild-arrowhead-artist-modal-close above)
   that simply floats over this padding reserve rather than needing the
   header's own layout to account for it. ENQUIRE is NOT in this header --
   see .artguild-arrowhead-artist-modal-actions below. */
.artguild-arrowhead-artists .artguild-arrowhead-artist-modal-header {
    position: relative;
    display: block;
    min-height: 0;
    margin: 0 0 24px;
    padding: 0 52px 18px;
    border-bottom: 1px solid #d8aa61;
    text-align: center;
}
.artguild-arrowhead-artists .artguild-arrowhead-artist-modal-heading {
    width: 100%;
    margin: 0;
    padding: 0;
    text-align: center;
    line-height: 1.15;
    white-space: normal;
}
.artguild-arrowhead-artists .artguild-arrowhead-artist-modal-name {
    color: #ba2025;
    font-family: "Asap Condensed", sans-serif;
    font-size: 30px;
    font-weight: 600;
    letter-spacing: 0px;
    text-transform: uppercase;
    padding-right: .25em;
}
.artguild-arrowhead-artists .artguild-arrowhead-artist-modal-tag {
    color: #000000;
    font-family: "Asap Condensed", sans-serif;
    font-weight: 400;
    letter-spacing: 0px;
    font-style: normal;
}
.artguild-arrowhead-artists .artguild-arrowhead-artist-modal-enquire,
.artguild-arrowhead-artists .artguild-arrowhead-artist-modal-website {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 14px 28px;
    border-radius: 3px;
    background: #1f9e69;
    color: #fff;
    font-family: "Asap Condensed", sans-serif;
    font-size: 15px;
    line-height: 1;
    letter-spacing: .02em;
    text-decoration: none;
    transition: background-color .2s ease;
}
/* Porto's base theme.css has a bare a:hover{text-decoration:underline}
   rule at (0,1,1) specificity; ours is already comfortably higher and
   should already win, but production still showed an underline, so this
   is now a narrowly-scoped !important on text-decoration only (nothing
   else here uses !important) as a defensive backstop across every state
   requested, not just hover/focus-visible. Background only changes for
   hover/focus-visible (below); every other state keeps the normal green. */
.artguild-arrowhead-artists .artguild-arrowhead-artist-modal-enquire, 
.artguild-arrowhead-artists .artguild-arrowhead-artist-modal-enquire:link, 
.artguild-arrowhead-artists .artguild-arrowhead-artist-modal-enquire:visited, 
.artguild-arrowhead-artists .artguild-arrowhead-artist-modal-enquire:hover, 
.artguild-arrowhead-artists .artguild-arrowhead-artist-modal-enquire:focus, 
.artguild-arrowhead-artists .artguild-arrowhead-artist-modal-enquire:focus-visible, 
.artguild-arrowhead-artists .artguild-arrowhead-artist-modal-enquire:active,
.artguild-arrowhead-artists .artguild-arrowhead-artist-modal-website,
.artguild-arrowhead-artists .artguild-arrowhead-artist-modal-website:link,
.artguild-arrowhead-artists .artguild-arrowhead-artist-modal-website:visited,
.artguild-arrowhead-artists .artguild-arrowhead-artist-modal-website:hover,
.artguild-arrowhead-artists .artguild-arrowhead-artist-modal-website:focus,
.artguild-arrowhead-artists .artguild-arrowhead-artist-modal-website:focus-visible,
.artguild-arrowhead-artists .artguild-arrowhead-artist-modal-website:active
{
    color: #fff;
    text-decoration: none !important;
}

.artguild-arrowhead-artists .artguild-arrowhead-artist-modal-enquire:hover, 
.artguild-arrowhead-artists .artguild-arrowhead-artist-modal-enquire:focus-visible,
.artguild-arrowhead-artists .artguild-arrowhead-artist-modal-website:hover,
.artguild-arrowhead-artists .artguild-arrowhead-artist-modal-website:focus-visible
{
    background: #177b52;
}

/* 1b. Action row: ENQUIRE lives here now, below the header/divider, not in
   the header itself. Shares the exact 3-column geometry (repeat(3,
   minmax(0, 1fr)), same 24px gap) as .artguild-arrowhead-artist-modal-
   highlights directly below it, so placing the button in column 3 lines it
   up with the third Highlight column without any absolute positioning. */
.artguild-arrowhead-artists .artguild-arrowhead-artist-modal-actions {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
    margin-bottom: 20px;
}
.artguild-arrowhead-artists .artguild-arrowhead-artist-modal-actions .artguild-arrowhead-artist-modal-enquire {
    grid-column: 3;
    justify-self: end;
}
/* 2. Top artwork row: three equal Artist Highlight boxes -- image only, no
   caption (title/medium display is reserved for the Featured Artwork box
   below; see renderArtist()). A subtle full-width gold rule marks the end
   of the row before the portrait/bio section starts. Shares its column
   geometry (3 equal columns, same gap) with .artguild-arrowhead-artist-
   modal-profile below, so a Highlight box, the portrait, and the Featured
   Artwork box are all the same width. */
.artguild-arrowhead-artists .artguild-arrowhead-artist-modal-highlights {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
    padding-bottom: 26px;
    margin-bottom: 30px;
    border-bottom: 1px solid #d8aa61;
}
.artguild-arrowhead-artists .artguild-arrowhead-artist-modal-highlight-col {
    display: flex;
    flex-direction: column;
}
.artguild-arrowhead-artists .artguild-arrowhead-artist-modal-highlight {
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    background: #faf8f3;
}
.artguild-arrowhead-artists .artguild-arrowhead-artist-modal-highlight-image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}
.artguild-arrowhead-artists .artguild-arrowhead-artist-modal-highlight-empty {
    padding: 10px;
    color: #8491a0;
    font-size: 13px;
    text-align: center;
}
/* Shared caption styling for both Highlight boxes and the Featured Artwork
   box below -- one set of rules for "real title/medium data, cleanly
   displayed" rather than near-duplicate rules per section. Alignment is
   set by the parent (centered under Highlights, left-aligned under
   Featured Artwork) so these two rules stay layout-agnostic. */
.artguild-arrowhead-artists .artguild-arrowhead-artist-modal-artwork-title {
    margin: 0;
    color: #172b4d;
    font-size: 15px;
    font-weight: 700;
}
.artguild-arrowhead-artists .artguild-arrowhead-artist-modal-artwork-medium {
    margin: 2px 0 0;
    color: #172b4d;
    font-size: 14px;
    font-style: italic;
}
/* 3. Main profile area: portrait + Featured Artwork (left column), bio
   (right column, spanning the other two of the same three columns the
   Highlights row above uses -- same width unit, so the portrait/Featured
   Artwork column lines up exactly under one Highlight box).

   A single grid row only -- portrait and Featured Artwork share the
   "portrait" cell (see .artguild-arrowhead-artist-modal-featured below)
   instead of each having their own row. Two auto/content-sized row tracks
   with bio spanning both (the previous layout) made CSS Grid grow the
   portrait's row to help fit bio's height, since bio's own row-spanning
   content contributes to sizing every track it crosses -- that pushed
   Featured Artwork down by however much taller the bio was than the
   portrait, which is exactly the "large gap on long bios" bug. With one
   row, bio's height can only affect that row's overall height (fine -- it
   still grows to fit whichever of bio or the portrait+Featured Artwork
   stack is taller, which is what the modal's scrolling relies on); it can
   no longer separate the two images from each other. */
.artguild-arrowhead-artists .artguild-arrowhead-artist-modal-profile {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-template-areas: "portrait bio bio";
    gap: 24px;
    align-items: start;
}
/* Portrait: forced to the same square as a Highlight/Featured Artwork box.
   object-fit: cover (not contain) is deliberate here -- a headshot fills a
   square crop naturally, unlike artwork where cropping would cut off part
   of the piece; object-position keeps the crop weighted toward the face
   rather than the vertical center. This crops, it never stretches. */
.artguild-arrowhead-artists .artguild-arrowhead-artist-modal-portrait {
    grid-area: portrait;
    display: flex;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    background: #faf8f3;
    border: 0;
    box-shadow: 0 4px 14px rgba(9, 25, 43, .14);
}
.artguild-arrowhead-artists .artguild-arrowhead-artist-modal-photo {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
}
.artguild-arrowhead-artists .artguild-arrowhead-artist-modal-bio-col {
    grid-area: bio;
}
.artguild-arrowhead-artists .artguild-arrowhead-artist-modal-bio {
    color: #24364b;
    font-size: 17px;
    line-height: 1.6;
    white-space: normal;
}
.artguild-arrowhead-artists .artguild-arrowhead-artist-modal-bio p {
    margin: 0 0 26px;
}
.artguild-arrowhead-artists .artguild-arrowhead-artist-modal-bio p:last-child {
    margin-bottom: 0;
}

/* A website written directly in the bio (see appendBioTextWithLinks() in
   js-arrowhead-artists.js) is styled as a visible inline link rather than
   plain biography text. */

.artguild-arrowhead-artists .artguild-arrowhead-artist-modal-bio a {
    color: #138b94;
    font-weight: 600;
}
.artguild-arrowhead-artists .artguild-arrowhead-artist-modal-links {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 16px;
    margin-top: 18px;
}

/* 4. Featured Artwork: directly under the portrait, same square geometry
   as the portrait and the Highlight boxes above (no extra divider line
   here -- the Highlights row's own border-bottom already separates this
   whole section). Image only -- no border, no caption/label -- to match
   the caption-free, borderless top Highlights.

   Placed in the portrait's own grid cell (not a second row -- see
   .artguild-arrowhead-artist-modal-profile above) and stacked under it
   with margin-top instead, so its position is anchored to the portrait's
   own rendered height, never to grid row-track sizing. The portrait is a
   forced 1:1 square (aspect-ratio), and a block's top-margin percentage
   always resolves against its containing block's WIDTH -- the same cell
   width the portrait itself fills -- so `100%` here equals the portrait's
   rendered height at any column width; +30px reproduces the same gap the
   gold divider above uses before the portrait (see the Highlights row's
   margin-bottom). */
.artguild-arrowhead-artists .artguild-arrowhead-artist-modal-featured {
    grid-area: portrait;
    align-self: start;
    margin-top: calc(100% + 30px);
}
.artguild-arrowhead-artists .artguild-arrowhead-artist-modal-featured-frame {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    background: #faf8f3;
}
.artguild-arrowhead-artists .artguild-arrowhead-artist-modal-featured-frame-image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}
.artguild-arrowhead-artists .artguild-arrowhead-artist-modal-featured-frame-empty {
    padding: 10px;
    color: #8491a0;
    font-size: 13px;
    text-align: center;
}
.artguild-arrowhead-artists .artguild-arrowhead-artist-modal-featured-label {
    margin: 8px 0 0;
    color: #172b4d;
    font-size: 14px;
    font-weight: 600;
}
/* 5. Enquire panel: a sibling VIEW inside this same modal/dialog (never a
   second modal). js-arrowhead-artists.js toggles the [hidden] attribute on
   this and on .artguild-arrowhead-artist-modal-content; only one is ever
   visible at a time. */
.artguild-arrowhead-artists .artguild-arrowhead-artist-modal-enquiry[hidden] {
    display: none;
}
.artguild-arrowhead-artists .artguild-arrowhead-artist-modal-enquiry {
    position: relative;
    display: flex;
    flex-direction: column;
}
.artguild-arrowhead-artists .artguild-arrowhead-artist-modal-enquiry-heading {
    order: 1;
}
.artguild-arrowhead-artists .artguild-arrowhead-artist-modal-enquiry-form {
    order: 2;
}
.artguild-arrowhead-artists .artguild-arrowhead-artist-modal-back {
    order: 3;
}
/* Secondary button (Form 19's #artguild-gf19-update-information pattern --
   white background, teal border/text, light-teal hover; see
   css/membership-renewal.css). Stacks in normal flow below the form by
   default; the min-width:768px block further down pulls it onto the
   Submit row on desktop only. */
.artguild-arrowhead-artists .artguild-arrowhead-artist-modal-back {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    align-self: flex-start;
    margin-top: 16px;
    height: 42px;
    padding: 0 22px;
    border: 1.5px solid #247b83;
    border-radius: 3px;
    background: #fff;
    color: #247b83;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .02em;
    text-transform: uppercase;
    text-decoration: none;
    cursor: pointer;
    transition: background-color .2s ease, color .2s ease;
}
.artguild-arrowhead-artists .artguild-arrowhead-artist-modal-back:hover, .artguild-arrowhead-artists .artguild-arrowhead-artist-modal-back:focus-visible {
    background: #eef7f8;
    color: #1b5d66;
    text-decoration: none;
}
/* Enquiry header: "ENQUIRE ABOUT | {Artist Name}" (three spans built by
   showEnquiry() in js-arrowhead-artists.js), centered as one block, same
   symmetric-padding-for-genuine-centering approach as the Artist view's
   own header, with its own #d8aa61 gold divider directly below it -- no
   second decorative line added under that divider. */
.artguild-arrowhead-artists .artguild-arrowhead-artist-modal-enquiry-heading {
    margin: 0 0 20px;
    padding: 0 50px 18px;
    border-bottom: 1px solid #d8aa61;
    text-align: center;
    line-height: 1.15;
}
.artguild-arrowhead-artists .artguild-arrowhead-artist-modal-enquiry-heading-label {
    color: #ba2025;
    font-family: "Asap Condensed", sans-serif;
    font-size: 30px;
    font-weight: 700;
    text-transform: uppercase;
}
.artguild-arrowhead-artists .artguild-arrowhead-artist-modal-enquiry-heading-sep {
    margin: 0 10px;
    color: #000000;
    font-weight: 400;
}
.artguild-arrowhead-artists .artguild-arrowhead-artist-modal-enquiry-heading-name {
    color: #000000;
    font-family: "Asap Condensed", sans-serif;
    font-size: 30px;
    font-weight: 400;
    /* Deliberately NOT uppercase -- unlike the Artist view's own name,
       the goal image shows this in normal case as stored/displayed. */
}
/* Form 10 field styling, scoped to this Enquire view only -- reuses Form
   19's established visual language (labels, input borders/heights/radius,
   focus ring, required-indicator color, compact field rhythm; see
   css/membership-renewal.css sections 3/5) without touching Form 19 or
   restyling Gravity Forms globally. This GF install uses legacy markup
   (confirmed via membership-renewal.css's own "Legacy markup uses nested
   lists" handling for Form 19), so the field list is a <ul> and each field
   an <li class="gfield">. !important mirrors Form 19's own defensive
   pattern against GF's/Porto's default field CSS. */
.artguild-arrowhead-artists .artguild-arrowhead-artist-modal-enquiry-form #gform_wrapper_10 {
    margin: 0;
    font-family: "Asap Condensed", Arial, Helvetica, sans-serif;
}
/*
 * Root cause of the large blank bands between field rows: Gravity Forms'
 * own assets/css/dist/basic.min.css sets
 *   .gform_fields{display:grid;grid-row-gap:16px;grid-template-columns:repeat(12,1fr);...}
 * -- a real CSS Grid row-gap, separate from and IN ADDITION TO any margin
 * we put on .gfield (each .gfield spans grid-column:1/-1, i.e. one row).
 * We were only ever overriding .gfield's own margin, so every row had
 * margin-bottom PLUS this 16px grid gap stacked on top of it. Normalizing
 * the gap to 0 here makes .gfield's margin-bottom the ONE source of
 * spacing between field groups -- not both.
 */
.artguild-arrowhead-artists .artguild-arrowhead-artist-modal-enquiry-form #gform_wrapper_10 .gform_fields {
    grid-row-gap: 0 !important;
    row-gap: 0 !important;
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
}
.artguild-arrowhead-artists .artguild-arrowhead-artist-modal-enquiry-form #gform_wrapper_10 .gfield {
    margin: 0 0 26px !important;
    padding: 0 !important;
}
.artguild-arrowhead-artists .artguild-arrowhead-artist-modal-enquiry-form #gform_wrapper_10 .gfield--type-hidden {
    margin: 0 !important;
}
.artguild-arrowhead-artists .artguild-arrowhead-artist-modal-enquiry-form #gform_wrapper_10 .ginput_container {
    margin-top: 0 !important;
}
.artguild-arrowhead-artists .artguild-arrowhead-artist-modal-enquiry-form #gform_wrapper_10 .gfield_label {
    margin: 0 0 6px !important;
    color: #172b4d !important;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 14px !important;
    font-weight: 600 !important;
}
/* Required indicator (Form 10's own field settings already render the
   configured "(Required)" text) in Art Guild red, readable/proportional
   but not heavy -- the label word itself stays the dark Form-19 label
   color above; only this span turns red. */
.artguild-arrowhead-artists .artguild-arrowhead-artist-modal-enquiry-form #gform_wrapper_10 .gfield_required {
    color: #ba2025 !important;
    font-size: 12px !important;
    font-weight: 400 !important;
}
/*
 * Gravity Forms' Name field renders its First/Last sub-labels with a
 * DIFFERENT class (gform-field-label--type-sub) than the main field label
 * (.gfield_label above) -- confirmed in includes/fields/class-gf-field-
 * name.php -- so they were previously unstyled by this file entirely and
 * fell back to Gravity Forms' own default sub-label spacing. That default,
 * plus this field's own name_first/name_last/ginput_container_name wrapper
 * margins, is what was producing extra vertical space after Name beyond
 * what .gfield's own margin-bottom controls; both are reset here.
 */
.artguild-arrowhead-artists .artguild-arrowhead-artist-modal-enquiry-form #gform_wrapper_10 .gform-field-label--type-sub {
    display: block;
    margin: 5px 0 0 !important;
    padding: 0 !important;
    color: #687583 !important;
    font-size: 12px !important;
    font-weight: 400 !important;
}
.artguild-arrowhead-artists .artguild-arrowhead-artist-modal-enquiry-form #gform_wrapper_10 .name_first, .artguild-arrowhead-artists .artguild-arrowhead-artist-modal-enquiry-form #gform_wrapper_10 .name_last, .artguild-arrowhead-artists .artguild-arrowhead-artist-modal-enquiry-form #gform_wrapper_10 .ginput_container_name, .artguild-arrowhead-artists .artguild-arrowhead-artist-modal-enquiry-form #gform_wrapper_10 .ginput_complex {
    margin: 0 !important;
    padding: 0 !important;
}
.artguild-arrowhead-artists .artguild-arrowhead-artist-modal-enquiry-form #gform_wrapper_10 .ginput_complex {
    column-gap: 12px;
}
.artguild-arrowhead-artists .artguild-arrowhead-artist-modal-enquiry-form #gform_wrapper_10 input[type="text"], .artguild-arrowhead-artists .artguild-arrowhead-artist-modal-enquiry-form #gform_wrapper_10 input[type="email"], .artguild-arrowhead-artists .artguild-arrowhead-artist-modal-enquiry-form #gform_wrapper_10 textarea {
    box-sizing: border-box;
    width: 100%;
    height: 42px !important;
    min-height: 42px !important;
    padding: 10px 12px !important;
    background: #fff !important;
    border: 1px solid #b9c8cf !important;
    border-radius: 6px !important;
    box-shadow: none !important;
    color: #172b4d;
    font-size: 15px;
    font-family: Arial, Helvetica, sans-serif;
}
/* Message textarea: fixed at 155px (within the requested 150-160px range)
   on min-height/height/max-height together so Gravity Forms' own
   rows-attribute sizing can never re-expand it back to its old tall
   default; resize:vertical still lets a visitor drag it taller manually
   if they genuinely need to. */
.artguild-arrowhead-artists .artguild-arrowhead-artist-modal-enquiry-form #gform_wrapper_10 textarea {
    height: 155px !important;
    min-height: 155px !important;
    max-height: 155px !important;
    resize: vertical;
}
.artguild-arrowhead-artists .artguild-arrowhead-artist-modal-enquiry-form #gform_wrapper_10 input:focus, .artguild-arrowhead-artists .artguild-arrowhead-artist-modal-enquiry-form #gform_wrapper_10 textarea:focus {
    outline: none !important;
    border-color: #2c8f9c !important;
    box-shadow: 0 0 0 3px rgba(44, 143, 156, .15) !important;
}
.artguild-arrowhead-artists .artguild-arrowhead-artist-modal-enquiry-form #gform_wrapper_10 .gfield_description {
    margin-top: 4px;
    color: #52616b !important;
    font-size: 13px !important;
    line-height: 1.4;
}
/* Bottom action row: a quiet neutral divider (never gold) directly above
   Submit. Submit is Gravity Forms' own <input type="submit">, never
   duplicated or replaced -- only right-aligned and recolored to
   coordinate with the green ENQUIRE action. */
.artguild-arrowhead-artists .artguild-arrowhead-artist-modal-enquiry-form #gform_wrapper_10 .gform_footer {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    /* No margin-top here -- Message's own .gfield margin-bottom (26px,
       same single spacing source as every other field) is what puts
       26px between the textarea and this divider; adding a margin here
       too would compound it the same way .gform_fields' grid-row-gap
       was compounding the field-to-field spacing. Padding-top (buttons
       below the divider) is untouched. */
    margin: 0 !important;
    padding: 16px 0 0 !important;
    border-top: 1px solid #e5e9eb;
    background: transparent !important;
}
.artguild-arrowhead-artists .artguild-arrowhead-artist-modal-enquiry-form #gform_wrapper_10 .gform_button, .artguild-arrowhead-artists .artguild-arrowhead-artist-modal-enquiry-form #gform_wrapper_10 input[type="submit"] {
    height: 42px !important;
    min-height: 42px !important;
    padding: 0 30px !important;
    border: 0 !important;
    border-radius: 3px !important;
    background: #1f9e69 !important;
    color: #fff !important;
    font-family: "Asap Condensed", Arial, Helvetica, sans-serif !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    letter-spacing: .02em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background-color .2s ease;
}
.artguild-arrowhead-artists .artguild-arrowhead-artist-modal-enquiry-form #gform_wrapper_10 .gform_button:hover, .artguild-arrowhead-artists .artguild-arrowhead-artist-modal-enquiry-form #gform_wrapper_10 input[type="submit"]:hover, .artguild-arrowhead-artists .artguild-arrowhead-artist-modal-enquiry-form #gform_wrapper_10 .gform_button:focus-visible, .artguild-arrowhead-artists .artguild-arrowhead-artist-modal-enquiry-form #gform_wrapper_10 input[type="submit"]:focus-visible {
    background: #177b52 !important;
}
/* Desktop only: pull Back to Artist out of normal flow onto the same
   visual row as Submit -- .enquiry is position:relative and Back to Artist
   is its last flex child, so bottom:0/left:0 lines up with the footer's
   bottom edge, which is also .enquiry's own bottom edge. Below this width
   Back to Artist stays in normal flow (rule above), stacked below the
   form. */
@media (min-width: 768px) {
    .artguild-arrowhead-artists .artguild-arrowhead-artist-modal-back {
        position: absolute;
        left: 0;
        bottom: 0;
        margin-top: 0;
    }
}
/* Locked on both html and body: body alone is the common pattern, but
   Porto's own base CSS (theme.css) sets overflow-x on <html> directly,
   which means <html> -- not just <body> -- can end up the page's true
   scrolling element depending on content height. Locking only body left
   that root scroll path available, which is what made wheel/trackpad input
   over the fixed overlay behave inconsistently instead of scrolling it. */
html.arrowhead-modal-open, body.arrowhead-modal-open {
    overflow: hidden;
}
@media (max-width: 991px) {
    .artguild-arrowhead-artists .artguild-arrowhead-artists-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}
@media (max-width: 767px) {
    .artguild-arrowhead-artists {
        padding-top: 16px;
    }
    .artguild-arrowhead-artists .artguild-arrowhead-artists-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 24px 16px;
    }
    .artguild-arrowhead-artists .artguild-arrowhead-artist-name {
        font-size: 18px;
    }
    .artguild-arrowhead-artists .artguild-arrowhead-artist-modal-dialog {
        padding: 28px 20px 22px;
        border-radius: 14px;
    }
    /* Desktop grew the ENQUIRE button and close hit-area for the header
       polish pass; both are pinned back to their prior compact mobile
       sizes here so mobile/tablet layout is unaffected by that change. */
    .artguild-arrowhead-artists .artguild-arrowhead-artist-modal-close {
        top: 28px;
        right: 20px;
        width: 34px;
        height: 34px;
        font-size: 28px;
    }
    /* Symmetric, not padding-right only -- keeps the centered name/tag
       genuinely centered at mobile widths too. */
    .artguild-arrowhead-artists .artguild-arrowhead-artist-modal-header {
        padding: 0 40px 16px;
    }
    .artguild-arrowhead-artists .artguild-arrowhead-artist-modal-enquiry-heading {
        padding: 0 40px 16px;
    }
    .artguild-arrowhead-artists .artguild-arrowhead-artist-modal-enquiry-heading-label, .artguild-arrowhead-artists .artguild-arrowhead-artist-modal-enquiry-heading-name {
        font-size: 24px;
    }
    .artguild-arrowhead-artists .artguild-arrowhead-artist-modal-back {
        align-self: stretch;
        justify-content: center;
    }
    /* The action row collapses to one column and centers ENQUIRE instead of
       right-aligning it above a Highlight column that's no longer directly
       beneath it once the Highlights row itself drops to 2 columns. */
    .artguild-arrowhead-artists .artguild-arrowhead-artist-modal-actions {
        grid-template-columns: 1fr;
        margin-bottom: 16px;
    }
    .artguild-arrowhead-artists .artguild-arrowhead-artist-modal-actions .artguild-arrowhead-artist-modal-enquire {
        grid-column: 1;
        justify-self: center;
    }
    .artguild-arrowhead-artists .artguild-arrowhead-artist-modal-enquire {
        padding: 11px 26px;
    }
    .artguild-arrowhead-artists .artguild-arrowhead-artist-modal-highlights {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 16px;
    }
    .artguild-arrowhead-artists .artguild-arrowhead-artist-modal-profile {
        grid-template-columns: 1fr;
        grid-template-areas: "portrait""featured""bio";
        gap: 20px;
    }
    /* Below the two-column breakpoint the portrait/Featured Artwork column
       no longer shares the Highlights row's per-column width, so both are
       recapped to the same fixed square (centered as a whole block, so the
       Featured Artwork caption stays aligned under its image) instead of
       stretching full-width. */
    .artguild-arrowhead-artists .artguild-arrowhead-artist-modal-portrait, .artguild-arrowhead-artists .artguild-arrowhead-artist-modal-featured {
        max-width: 260px;
        margin-left: auto;
        margin-right: auto;
    }
    /* Single-column layout: Featured Artwork goes back to being its own
       row (the desktop rule above shares the portrait's cell instead,
       which only makes sense next to the portrait's row here on mobile).
       gap: 20px on the grid above already provides one controlled,
       bio-independent space before it, so no separate margin-top is
       needed -- adding one on top of that gap was the mobile half of the
       excessive-gap bug. */
    .artguild-arrowhead-artists .artguild-arrowhead-artist-modal-featured {
        grid-area: featured;
        align-self: start;
        margin-top: 0;
        text-align: center;
    }
}
@media (max-width: 479px) {
    .artguild-arrowhead-artists .artguild-arrowhead-artists-shell {
        width: calc(100% - 28px);
    }
    .artguild-arrowhead-artists .artguild-arrowhead-artists-grid {
        grid-template-columns: 1fr;
    }
    .artguild-arrowhead-artists .artguild-arrowhead-artists-actions {
        text-align: center;
    }
    .artguild-arrowhead-artists .artguild-arrowhead-artist-modal-highlights {
        grid-template-columns: 1fr;
    }
}