/* ==========================================================================
   about-contact-enhanced.css
   --------------------------------------------------------------------------
   Rebuilds the contact / CTA block at the bottom of company/about.html.

   Three problems this fixes:

   1. The panel was half black and half page-background. `.section-inner`
      painted a flat #030712, but the form column sat past the edge of that
      painted box, so the right-hand third fell through to the grid behind it.
      The panel is now ONE surface that owns its own background edge to edge —
      a dark base with a light grid drawn on top of it, so the whole block
      reads as grid and every label still sits on a dark, readable ground.

   2. The form fields were bare underlines with no width, no box and no
      reliable stacking context. They are now real inputs — full width, boxed,
      with a visible focus ring — and the column is given an explicit z-index
      so no decorative layer can sit over them and swallow clicks. Every
      decorative layer here is pointer-events: none.

   3. The layout was a flex row whose children could overflow. It is now a
      two-column grid with minmax(0, …) tracks, which cannot overflow, and
      collapses to one column on narrow screens.

   Loaded LAST on about.html so it wins on cascade order. !important appears
   only against declarations that already carry it (the theme's placeholder
   colours) or against the theme's own !important container overrides.
   ========================================================================== */

.academyship-contact-area {
  --acx-ink: #f8fafc;
  --acx-muted: rgba(226, 232, 240, 0.66);
  --acx-line: rgba(255, 255, 255, 0.14);
  --acx-accent: #98ff03;
  --acx-radius: 26px;
  /* Every heading and title in this block runs on AnekBangla. The face is
     declared in academyship-about-base.css and already used across the page,
     so nothing extra is loaded for it. */
  --acx-display: "AnekBangla", "Inter", system-ui, sans-serif;
}

.academyship-contact-area .section-inner .left-content-area .get-in-touch ul li a,
.academyship-contact-area .section-inner .left-content-area .location-area ul li .h4 {
  font-family: var(--acx-display);
}

/* ── The panel ─────────────────────────────────────────────────────────────
   One surface, edge to edge: a single fine 46px grid at 2.8% white, then two
   colour glows over the base colour. Nothing fades the grid out — it runs the
   full height of the panel, which is the point of the treatment.

   Deliberately ONE grid, not two. An earlier version stacked a 220px major
   grid with intersection dots on top of the fine one; those heavy lines cut
   across the copy and hurt readability, which is the opposite of what a
   background texture is for. The fine grid alone reads as blueprint paper and
   stays well under the text. */
.academyship-contact-area .section-inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 560px);
  align-items: stretch;
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: var(--acx-radius);
  overflow: hidden;
  background-color: #05080f;
  background-image:
    repeating-linear-gradient(to right, rgba(255, 255, 255, 0.075) 0 1px, transparent 1px 46px),
    repeating-linear-gradient(to bottom, rgba(255, 255, 255, 0.075) 0 1px, transparent 1px 46px),
    radial-gradient(115% 95% at 90% -12%, rgba(124, 58, 237, 0.4) 0%, transparent 60%),
    radial-gradient(95% 85% at -6% 112%, rgba(152, 255, 3, 0.18) 0%, transparent 62%);
  box-shadow:
    0 40px 90px rgba(2, 6, 18, 0.45),
    inset 0 1px 0 rgba(255, 255, 255, 0.07);
}

/* Vignette only — it darkens the far corners a little so the panel has depth,
   but leaves the grid readable everywhere including the bottom edge. */
.academyship-contact-area .section-inner::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(125% 125% at 50% 38%, transparent 52%, rgba(3, 6, 14, 0.6) 100%);
}

/* A hairline of brand colour along the top edge. */
.academyship-contact-area .section-inner::after {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 2px;
  z-index: 3;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, var(--acx-accent) 22%, #7c3aed 68%, transparent);
  opacity: 0.7;
}

/* ── Left column ─────────────────────────────────────────────────────────── */

.academyship-contact-area .section-inner .left-content-area {
  position: relative;
  z-index: 2;
  max-width: none;
  width: auto;
  margin: 0;
  padding: 64px 56px 72px;
  gap: 58px;
  justify-content: center;
}

.academyship-contact-area .section-inner .left-content-area .get-in-touch ul li a {
  position: relative;
  display: inline-block;
  font-size: clamp(26px, 2.4vw, 40px);
  line-height: 1.1;
  color: var(--acx-ink);
  transition: color 0.28s ease;
}

/* Underline sweeps in from the left on hover rather than appearing at once. */
.academyship-contact-area .section-inner .left-content-area .get-in-touch ul li a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -6px;
  width: 100%;
  height: 2px;
  background: var(--acx-accent);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.34s cubic-bezier(0.22, 1, 0.36, 1);
}

.academyship-contact-area .section-inner .left-content-area .get-in-touch ul li a:hover {
  color: var(--acx-accent);
}

.academyship-contact-area .section-inner .left-content-area .get-in-touch ul li a:hover::after,
.academyship-contact-area .section-inner .left-content-area .get-in-touch ul li a:focus-visible::after {
  transform: scaleX(1);
}

.academyship-contact-area .section-inner .left-content-area .get-in-touch ul li:last-child {
  color: var(--acx-muted);
  font-size: 15px;
}

/* Presence entries become tiles so the two markets read as a pair of cards
   rather than two loose paragraphs. */
.academyship-contact-area .section-inner .left-content-area .location-area ul {
  gap: 20px;
  flex-wrap: wrap;
}

.academyship-contact-area .section-inner .left-content-area .location-area ul li {
  --acx-tile: var(--acx-accent);
  position: relative;
  overflow: hidden;
  flex: 1 1 260px;
  min-width: 0;
  padding: 22px 24px 24px;
  border: 1.5px solid var(--acx-tile);
  border-radius: 16px;
  /* Plain value first: color-mix is the enhancement, not the requirement. */
  background: rgba(255, 255, 255, 0.03);
  background: color-mix(in srgb, var(--acx-tile) 6%, rgba(255, 255, 255, 0.03));
  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.3s ease, background 0.3s ease;
}

/* Live market reads green, the next one violet, so the two are legible as a
   sequence rather than two equal statements. */
.academyship-contact-area .section-inner .left-content-area .location-area ul li:nth-child(2) {
  --acx-tile: #a78bfa;
}

/* The expansion statement spans the full width beneath the two market tiles —
   one basis of 100% is all it takes, because the list already wraps. Its own
   accent (cyan) reads as the two markets leading somewhere, rather than as a
   third market alongside them. */
.academyship-contact-area .section-inner .left-content-area .location-area ul li.acx-world {
  --acx-tile: #22d3ee;
  flex: 1 1 100%;
  padding: 24px 28px 26px;
}

.academyship-contact-area .section-inner .left-content-area .location-area ul li.acx-world p {
  font-size: 15px;
  font-weight: 500;
  line-height: 1.72;
  color: rgba(241, 245, 249, 0.86);
}

.academyship-contact-area .section-inner .left-content-area .location-area ul li:hover {
  transform: translateY(-5px);
  background: color-mix(in srgb, var(--acx-tile) 12%, rgba(255, 255, 255, 0.03));
  box-shadow: 0 14px 34px color-mix(in srgb, var(--acx-tile) 22%, transparent);
}

.academyship-contact-area .section-inner .left-content-area .location-area ul li .h4 {
  margin-bottom: 12px;
  font-size: clamp(20px, 1.5vw, 26px);
  color: var(--acx-ink);
  letter-spacing: 0.03em;
}

.academyship-contact-area .section-inner .left-content-area .location-area ul li p {
  color: var(--acx-muted);
  font-size: 14px;
  line-height: 1.55;
}

/* The hard <br> in the presence copy was authored for a full-width paragraph.
   Inside these tiles it now breaks mid-sentence and leaves an orphan word, so
   the line wraps to the tile instead. */
.academyship-contact-area .section-inner .left-content-area .location-area ul li p br {
  display: none;
}

/* ── Right column: the form ───────────────────────────────────────────────
   z-index 2 puts the whole column above every decorative layer in the panel,
   which is what makes the fields reliably clickable. */
.academyship-contact-area .section-inner .contact-form-area {
  position: relative;
  z-index: 2;
  max-width: none;
  width: auto;
  padding: 56px 48px 60px;
  border-left: 1px solid var(--acx-line);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.015)),
    linear-gradient(180deg, rgba(5, 8, 15, 0.55), rgba(5, 8, 15, 0.72));
}

/* Bracket in the top-left of the form column — picks up the blueprint idea of
   the grid without adding another full layer. */
.academyship-contact-area .section-inner .contact-form-area::before {
  content: "";
  position: absolute;
  top: 22px;
  left: 22px;
  width: 26px;
  height: 26px;
  z-index: 0;
  pointer-events: none;
  border-top: 2px solid var(--acx-accent);
  border-left: 2px solid var(--acx-accent);
  opacity: 0.55;
}

.academyship-contact-area .section-inner .contact-form-area form .single-input {
  margin-bottom: 22px;
}

.academyship-contact-area .section-inner .contact-form-area form .single-input label {
  display: block;
  margin-bottom: 9px;
  color: rgba(248, 250, 252, 0.82);
  font-family: var(--font-primary);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.academyship-contact-area .section-inner .contact-form-area form .single-input input,
.academyship-contact-area .section-inner .contact-form-area form .single-input textarea {
  display: block;
  width: 100%;
  box-sizing: border-box;
  padding: 0 16px;
  border: 1px solid var(--acx-line);
  border-radius: 12px;
  background: rgba(4, 7, 15, 0.55);
  color: var(--acx-ink);
  font-family: var(--font-secondary);
  font-size: 15px;
  font-weight: 500;
  transition: border-color 0.22s ease, box-shadow 0.22s ease, background 0.22s ease;
}

.academyship-contact-area .section-inner .contact-form-area form .single-input input {
  height: 52px;
}

.academyship-contact-area .section-inner .contact-form-area form .single-input textarea {
  height: 132px;
  padding: 14px 16px;
  line-height: 1.5;
  resize: vertical;
}

.academyship-contact-area .section-inner .contact-form-area form .single-input input::placeholder,
.academyship-contact-area .section-inner .contact-form-area form .single-input textarea::placeholder {
  color: rgba(203, 213, 225, 0.5) !important;
  font-weight: 400;
}

.academyship-contact-area .section-inner .contact-form-area form .single-input input:hover,
.academyship-contact-area .section-inner .contact-form-area form .single-input textarea:hover {
  border-color: rgba(255, 255, 255, 0.26);
}

.academyship-contact-area .section-inner .contact-form-area form .single-input input:focus,
.academyship-contact-area .section-inner .contact-form-area form .single-input textarea:focus {
  outline: none;
  border: 1px solid var(--acx-accent);
  background: rgba(4, 7, 15, 0.75);
  box-shadow: 0 0 0 3px rgba(152, 255, 3, 0.18);
}

/* ── Attachment row ─────────────────────────────────────────────────────── */
.academyship-contact-area .section-inner .contact-form-area form .single-input.last {
  margin-bottom: 0;
}

.academyship-contact-area .section-inner .contact-form-area form .single-input.last label {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 0;
  padding: 11px 18px;
  border: 1px dashed rgba(255, 255, 255, 0.3);
  border-radius: 999px;
  color: rgba(248, 250, 252, 0.8);
  font-size: 13px;
  letter-spacing: 0.02em;
  text-transform: none;
  transition: border-color 0.24s ease, color 0.24s ease, background 0.24s ease;
}

.academyship-contact-area .section-inner .contact-form-area form .single-input.last label:hover {
  border-color: var(--acx-accent);
  color: var(--acx-accent);
  background: rgba(152, 255, 3, 0.08);
}

.academyship-contact-area .section-inner .contact-form-area form .single-input.last label .ax-paperclip {
  width: 17px;
  height: 17px;
  flex: none;
}

/* Readout injected by about-contact-attachment.js once a file is chosen. */
.academyship-contact-area .section-inner .contact-form-area .acx-file-readout {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 12px;
  padding: 10px 14px;
  border: 1px solid rgba(152, 255, 3, 0.4);
  border-radius: 12px;
  background: rgba(152, 255, 3, 0.08);
}

.academyship-contact-area .section-inner .contact-form-area .acx-file-readout[hidden] {
  display: none;
}

.academyship-contact-area .section-inner .contact-form-area .acx-file-name {
  flex: 1 1 auto;
  width: auto;
  min-width: 0;
  overflow: hidden;
  color: var(--acx-ink);
  font-family: var(--font-secondary);
  font-size: 13px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* width: auto is load-bearing. The theme sets a global `button { width: 100% }`
   (Forms Styles, academyship-about-base.css), so with flex-basis: auto this
   button resolved to the full row width and collapsed the filename beside it
   to nothing. */
.academyship-contact-area .section-inner .contact-form-area .acx-file-clear {
  flex: 0 0 auto;
  width: auto;
  padding: 4px 10px;
  border: 1px solid rgba(255, 255, 255, 0.24);
  border-radius: 999px;
  background: transparent;
  color: rgba(248, 250, 252, 0.78);
  font-family: var(--font-primary);
  font-size: 12px;
  cursor: pointer;
  transition: border-color 0.2s ease, color 0.2s ease;
}

.academyship-contact-area .section-inner .contact-form-area .acx-file-clear:hover {
  border-color: var(--acx-accent);
  color: var(--acx-accent);
}

/* Keyboard users get the same ring the text fields get: the real <input
   type=file> is visually hidden, so the label has to show the focus. */
.academyship-contact-area .section-inner .contact-form-area form .single-input.last input:focus-visible + * ,
.academyship-contact-area .section-inner .contact-form-area form .single-input.last input:focus-visible ~ * {
  outline: none;
}

.academyship-contact-area .section-inner .contact-form-area form .single-input.last:focus-within label {
  border-color: var(--acx-accent);
  color: var(--acx-accent);
  box-shadow: 0 0 0 3px rgba(152, 255, 3, 0.18);
}

/* ── Submit ─────────────────────────────────────────────────────────────── */
.academyship-contact-area .section-inner .contact-form-area form .form-btn-area {
  margin-top: 30px;
}

/* Same control as the "Explore Academyship" action further up the page: dark
   pill, lime icon that glides from the left edge to the right on hover while
   the label's padding swaps to meet it, and a second arrow that cycles in from
   the bottom-left as the first leaves.

   Those rules are scoped to .academyship-purpose in the page's own <style>, so
   they are restated here for the form rather than rewritten there — widening
   that selector would push the design onto anything else on the page that
   later reuses the class.

   Two departures from the original, both deliberate. It runs the full width of
   the form column rather than fit-content — it is the submit control for that
   column, so it reads as one. And the fill is lifted well clear of #1a1a1c:
   against this panel's near-black ground that charcoal disappeared, so the pill
   is a lighter slate with a top highlight and a light edge to hold its shape.
   The 48px height and the whole icon-glide interaction are unchanged. */
.academyship-contact-area .section-inner .contact-form-area form .form-btn-area .academyship-action {
  position: relative;
  display: inline-flex;
  align-items: center;
  width: 100%;
  max-width: 100%;
  height: 48px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 999px;
  background: linear-gradient(180deg, #3d4457 0%, #272c39 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14);
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.4s cubic-bezier(0.4, 0, 0.2, 1), background 0.4s ease;
}

/* The lime fill. It wipes in from the left on hover, so the whole pill ends up
   the colour the icon chip starts as. clip-path rather than a scaleX because a
   scaled box distorts the 999px rounding as it grows; inset() with a matching
   round interpolates cleanly and keeps the pill shape the entire way across.

   z-index 0 puts it over the button's own background but under the icon and
   the label, both of which are lifted to 2. */
.academyship-contact-area .section-inner .contact-form-area form .form-btn-area .academyship-action::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: 999px;
  background: linear-gradient(180deg, #daff95 0%, #bfee67 100%);
  clip-path: inset(0 100% 0 0 round 999px);
  transition: clip-path 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.academyship-contact-area .section-inner .contact-form-area form .form-btn-area .academyship-action:hover::before,
.academyship-contact-area .section-inner .contact-form-area form .form-btn-area .academyship-action:focus-visible::before {
  clip-path: inset(0 0 0 0 round 999px);
}

/* top: 3px, not the original 4px — this pill carries a 1px border, so the box
   the icon is positioned inside is 46px tall rather than 48px. */
.academyship-contact-area .section-inner .contact-form-area form .form-btn-area .academyship-action-icon {
  position: absolute;
  top: 3px;
  left: 3px;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 40px;
  overflow: hidden;
  border-radius: 999px;
  background: linear-gradient(180deg, #daff95 0%, #bfee67 100%);
  transition: left 0.5s cubic-bezier(0.4, 0, 0.2, 1), background 0.4s ease;
}

/* Once the pill is lime, a lime chip on lime is invisible — so the chip and the
   arrows invert. Dark chip, lime arrows. */
.academyship-contact-area .section-inner .contact-form-area form .form-btn-area .academyship-action:hover .academyship-action-icon,
.academyship-contact-area .section-inner .contact-form-area form .form-btn-area .academyship-action:focus-visible .academyship-action-icon {
  background: linear-gradient(180deg, #23282f 0%, #14171c 100%);
}

.academyship-contact-area .section-inner .contact-form-area form .form-btn-area .academyship-action:hover .academyship-action-arrows svg,
.academyship-contact-area .section-inner .contact-form-area form .form-btn-area .academyship-action:focus-visible .academyship-action-arrows svg {
  fill: #cdf47c;
}

.academyship-contact-area .section-inner .contact-form-area form .form-btn-area .academyship-action-arrows {
  position: relative;
  width: 24px;
  height: 24px;
  transition: transform 0.7s cubic-bezier(0.4, 0, 0.2, 1);
}

.academyship-contact-area .section-inner .contact-form-area form .form-btn-area .academyship-action-arrows svg {
  position: absolute;
  top: 0;
  left: 0;
  width: 24px;
  height: 24px;
  fill: #000;
}

.academyship-contact-area .section-inner .contact-form-area form .form-btn-area .academyship-action-arrows svg:nth-child(2) {
  transform: translate(-24px, 24px);
}

/* position + z-index are what keep the label above the lime wipe. A static
   inline span paints before positioned z-index:0 boxes, so without this the
   fill would slide over the text. */
.academyship-contact-area .section-inner .contact-form-area form .form-btn-area .academyship-action-text {
  position: relative;
  z-index: 2;
  padding-left: 74px;
  padding-right: 26px;
  color: #fff;
  font-family: var(--acx-display);
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 0.01em;
  white-space: nowrap;
  transition: padding 0.5s cubic-bezier(0.4, 0, 0.2, 1), color 0.35s ease;
}

.academyship-contact-area .section-inner .contact-form-area form .form-btn-area .academyship-action:hover,
.academyship-contact-area .section-inner .contact-form-area form .form-btn-area .academyship-action:focus-visible {
  transform: translateY(-2px);
  /* No background change here — the ::before wipe covers it. The border moves
     to a lime edge so it does not read as a grey outline on a green pill. */
  border-color: rgba(120, 170, 40, 0.85);
  box-shadow: 0 14px 30px rgba(152, 255, 3, 0.22);
}

.academyship-contact-area .section-inner .contact-form-area form .form-btn-area .academyship-action:hover .academyship-action-icon,
.academyship-contact-area .section-inner .contact-form-area form .form-btn-area .academyship-action:focus-visible .academyship-action-icon {
  left: calc(100% - 56px - 3px);
}

.academyship-contact-area .section-inner .contact-form-area form .form-btn-area .academyship-action:hover .academyship-action-text,
.academyship-contact-area .section-inner .contact-form-area form .form-btn-area .academyship-action:focus-visible .academyship-action-text {
  padding-left: 26px;
  padding-right: 74px;
  color: #12210a;
}

.academyship-contact-area .section-inner .contact-form-area form .form-btn-area .academyship-action:hover .academyship-action-arrows,
.academyship-contact-area .section-inner .contact-form-area form .form-btn-area .academyship-action:focus-visible .academyship-action-arrows {
  transform: translate(24px, -24px);
}

/* ── Narrow screens: one column ─────────────────────────────────────────── */
@media (max-width: 1099px) {
  .academyship-contact-area .section-inner {
    grid-template-columns: minmax(0, 1fr);
  }

  .academyship-contact-area .section-inner .left-content-area {
    padding: 44px 32px 36px;
    gap: 40px;
  }

  .academyship-contact-area .section-inner .contact-form-area {
    padding: 40px 32px 48px;
    border-left: none;
    border-top: 1px solid var(--acx-line);
  }

  /* The corner bracket is placed 22px into a column whose desktop inset is
     48px. Once the column goes full width its inset drops to 32px (20px on a
     phone), so the bracket lands on top of the first field label instead of
     sitting in the corner beside it. It is decoration, and the column has
     already lost the left border it was bracketing — so it stands down. */
  .academyship-contact-area .section-inner .contact-form-area::before {
    display: none;
  }

  /* The presence list turns into a column here (base stylesheet), which flips
     `flex: 1 1 260px` from a 260px *width* basis into a 260px *height* basis
     that then grows — and `.acx-world`'s 100% basis into a full-column height.
     That is what stretched the Australia and New Zealand tiles far past their
     copy. In a column the tiles should simply be as tall as their content. */
  .academyship-contact-area .section-inner .left-content-area .location-area ul li,
  .academyship-contact-area .section-inner .left-content-area .location-area ul li.acx-world {
    flex: 0 0 auto;
  }
}

@media (max-width: 639px) {
  .academyship-contact-area {
    --acx-radius: 18px;
  }

  .academyship-contact-area .section-inner .left-content-area {
    padding: 34px 20px 28px;
  }

  .academyship-contact-area .section-inner .contact-form-area {
    padding: 30px 20px 38px;
  }

  .academyship-contact-area .section-inner .left-content-area .get-in-touch,
  .academyship-contact-area .section-inner .left-content-area .location-area {
    gap: 18px;
  }
}

/* ── One back-to-top arrow, not two ───────────────────────────────────────
   This page ships the about theme's own #goTop button AND the shared
   back-to-top component, which stacked two arrows in the bottom-right corner
   once the shared script's path was corrected. The shared one is what every
   other page uses, so the theme's is the one that stands down.

   Safe unscoped because this stylesheet is only ever loaded by about.html. */
#goTop {
  display: none !important;
}

@media (prefers-reduced-motion: reduce) {
  .academyship-contact-area .section-inner .left-content-area .location-area ul li,
  .academyship-contact-area .section-inner .contact-form-area form .form-btn-area button,
  .academyship-contact-area .section-inner .left-content-area .get-in-touch ul li a,
  .academyship-contact-area .section-inner .left-content-area .get-in-touch ul li a::after,
  .academyship-contact-area .section-inner .contact-form-area form .form-btn-area .academyship-action,
  .academyship-contact-area .section-inner .contact-form-area form .form-btn-area .academyship-action-icon,
  .academyship-contact-area .section-inner .contact-form-area form .form-btn-area .academyship-action-text,
  .academyship-contact-area .section-inner .contact-form-area form .form-btn-area .academyship-action-arrows,
  .academyship-contact-area .section-inner .contact-form-area form .form-btn-area .academyship-action::before {
    transition: none;
  }
}