/* ==========================================================================
   Kabir Enterprise — contact.php
   THE BRUTALIST STRUCTURAL CANVAS
   Oversized textual inputs, thick high-contrast walls, fluid box-height
   keyframes on focus and submit.
   Nav DNA: corner index blocks.
   ========================================================================== */

:root {
  --slab-ink: #111111;
  --slab-page: #FFFFFF;
  --slab-pink: #FF4F9A;
  --slab-wall: 5px;
  --axis-pad: 3.5rem;
}

body.a91-slab-page {
  background: var(--slab-page);
  color: var(--slab-ink);
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 16px;
  line-height: 1.45;
  overflow-x: clip;
  background-image:
    radial-gradient(ellipse 70% 45% at 100% 0%, rgba(255, 79, 154, 0.08), transparent 55%),
    radial-gradient(ellipse 50% 40% at 0% 100%, rgba(17, 17, 17, 0.04), transparent 60%);
}

body.a91-slab-page a { color: inherit; }

.a91-slab {
  width: 100%;
  max-width: 78rem;
  margin: 0 auto;
  padding: clamp(4.5rem, 9vw, 8rem) clamp(1rem, 5vw, 4rem) clamp(6rem, 12vw, 10rem);
}
body.a91-has-axis.a91-slab-page .a91-slab {
  padding-right: max(clamp(1rem, 5vw, 4rem), var(--axis-pad));
}
body.a91-has-axis.a91-slab-page .a91-slab-index {
  display: none !important;
}

/* ------------------------------------------------------------------ rules */

.a91-slab-rule {
  margin: 0;
  height: 2px;
  background: var(--slab-ink);
}

.a91-slab-rule--thick { height: var(--slab-wall); }

/* ---------------------------------------------------------------- masthead */

.a91-slab-mast { display: grid; gap: clamp(0.75rem, 2vw, 1.35rem); }

.a91-slab-tag {
  margin: 0;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.28em;
  text-transform: uppercase;
}

.a91-slab-brand {
  margin: 0;
  font-family: 'Archivo Black', sans-serif;
  font-weight: 400;
  font-size: clamp(2.6rem, 9vw, 7rem);
  line-height: 0.88;
  letter-spacing: -0.04em;
  text-transform: uppercase;
  color: var(--slab-ink);
  text-wrap: balance;
}

.a91-slab-title {
  margin: 0;
  font-family: 'Archivo Black', sans-serif;
  font-weight: 400;
  font-size: clamp(1.55rem, 5.5vw, 3.75rem);
  line-height: 0.88;
  letter-spacing: -0.03em;
  text-transform: uppercase;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.35rem clamp(0.45rem, 1.5vw, 0.9rem);
}

.a91-slab-title-l1 { color: var(--slab-ink); }

.a91-slab-title-l2 {
  color: var(--slab-page);
  background: var(--slab-pink);
  padding-inline: 0.18em;
}

.a91-slab-title-l3 {
  color: var(--slab-ink);
}

.a91-slab-sub {
  margin: 0;
  max-width: 40rem;
  font-size: clamp(0.9rem, 1.4vw, 1.05rem);
  font-weight: 600;
}

/* ------------------------------------------------------------------- flash */

.a91-slab-flash {
  display: flex;
  align-items: stretch;
  gap: 0;
  margin: clamp(1.5rem, 4vw, 2.5rem) 0 0;
  border: var(--slab-wall) solid var(--slab-ink);
}

.a91-slab-flash-mark {
  margin: 0;
  display: grid;
  place-items: center;
  min-width: 4.5rem;
  font-family: 'Archivo Black', sans-serif;
  font-size: 2rem;
  background: var(--slab-ink);
  color: var(--slab-page);
}

.a91-slab-flash.is-bad .a91-slab-flash-mark { background: var(--slab-pink); color: var(--slab-ink); }

.a91-slab-flash > div { padding: 1rem 1.25rem; }

.a91-slab-flash-title {
  margin: 0;
  font-family: 'Archivo Black', sans-serif;
  font-size: 1.1rem;
  text-transform: uppercase;
}

.a91-slab-flash-copy { margin: 0.35rem 0 0; font-size: 0.88rem; }

/* --------------------------------------------------------- structural form */

.a91-slab-form {
  margin-top: clamp(2rem, 6vw, 4rem);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0;
  border: var(--slab-wall) solid var(--slab-ink);
}

.a91-slab-cell {
  position: relative;
  display: grid;
  align-content: start;
  gap: 0.35rem;
  padding: clamp(0.85rem, 2vw, 1.35rem);
  background: var(--slab-page);
  /* Interior walls come from box-shadow so no double borders can form. */
  box-shadow: inset 0 0 0 0 var(--slab-ink);
  border-right: var(--slab-wall) solid var(--slab-ink);
  border-bottom: var(--slab-wall) solid var(--slab-ink);
  min-height: 7rem;
  transition: background 0.16s ease;
}

.a91-slab-cell--name  { grid-column: 1 / span 1; }
.a91-slab-cell--email { grid-column: 2 / span 1; border-right: 0; }
.a91-slab-cell--phone { grid-column: 1 / span 2; border-right: 0; }
.a91-slab-cell--msg   { grid-column: 1 / span 2; border-right: 0; border-bottom: 0; }

.a91-slab-cell-label {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.3em;
  text-transform: uppercase;
}

.a91-slab-cell-label em {
  font-style: normal;
  font-weight: 400;
  letter-spacing: 0.18em;
  opacity: 0.75;
}

.a91-slab-cell input,
.a91-slab-cell textarea {
  width: 100%;
  border: 0;
  padding: 0.35rem 0;
  background: transparent;
  color: var(--slab-ink);
  font-family: 'Archivo Black', sans-serif;
  font-size: clamp(1.35rem, 4vw, 2.75rem);
  line-height: 1.05;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  outline: 0;
}

.a91-slab-cell textarea {
  font-family: 'IBM Plex Mono', monospace;
  font-size: clamp(1rem, 2.2vw, 1.5rem);
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0;
  line-height: 1.35;
  resize: vertical;
}

.a91-slab-cell input::placeholder,
.a91-slab-cell textarea::placeholder { color: #555555; }

.a91-slab-cell:focus-within { background: var(--slab-pink); }
.a91-slab-cell:focus-within input,
.a91-slab-cell:focus-within textarea { color: var(--slab-ink); }
.a91-slab-cell:focus-within input::placeholder,
.a91-slab-cell:focus-within textarea::placeholder { color: #333333; }

/* Fluid box-height keyframes while a field holds focus. */
.a91-slab-cell.is-breathing { animation: a91SlabBreathe 2.6s ease-in-out infinite; }

@keyframes a91SlabBreathe {
  0%   { min-height: 7rem;    box-shadow: inset 0 0 0 0 var(--slab-ink); }
  35%  { min-height: 10.5rem; box-shadow: inset 0 -0.75rem 0 0 var(--slab-ink); }
  70%  { min-height: 9rem;    box-shadow: inset 0 -0.35rem 0 0 var(--slab-ink); }
  100% { min-height: 7rem;    box-shadow: inset 0 0 0 0 var(--slab-ink); }
}

.a91-slab-cell--msg.is-breathing { animation-name: a91SlabBreatheTall; }

@keyframes a91SlabBreatheTall {
  0%   { min-height: 12rem; box-shadow: inset 0 0 0 0 var(--slab-ink); }
  40%  { min-height: 17rem; box-shadow: inset 0 -1rem 0 0 var(--slab-ink); }
  75%  { min-height: 15rem; box-shadow: inset 0 -0.5rem 0 0 var(--slab-ink); }
  100% { min-height: 12rem; box-shadow: inset 0 0 0 0 var(--slab-ink); }
}

/* ------------------------------------------------------------------- send */

.a91-slab-send {
  position: relative;
  isolation: isolate;
  grid-column: 1 / span 2;
  appearance: none;
  border: 0;
  border-top: var(--slab-wall) solid var(--slab-ink);
  background: var(--slab-ink);
  color: var(--slab-page);
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 1rem;
  min-height: 6rem;
  cursor: pointer;
  overflow: hidden;
  box-shadow: inset 0 0 0 0 var(--slab-pink);
  transition:
    background 0.16s ease,
    color 0.16s ease,
    transform 0.14s ease,
    box-shadow 0.14s ease;
}
.a91-slab-send > * { position: relative; z-index: 1; }
.a91-slab-send::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--slab-pink);
  transform: translateY(101%);
  transition: transform 0.32s cubic-bezier(0.2, 0.85, 0.25, 1);
}

.a91-slab-send-word {
  font-family: 'Archivo Black', sans-serif;
  font-size: clamp(2.25rem, 9vw, 6rem);
  line-height: 0.85;
  letter-spacing: -0.04em;
}

.a91-slab-send-sub {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.3em;
  text-transform: uppercase;
}

.a91-slab-send:hover,
.a91-slab-send:focus-visible {
  color: var(--slab-ink);
  outline: 3px solid var(--slab-ink);
  outline-offset: -3px;
  transform: translate(2px, 2px);
  box-shadow: 4px 4px 0 var(--slab-ink);
}
.a91-slab-send:hover::after,
.a91-slab-send:focus-visible::after { transform: none; }

.a91-slab-send:hover .a91-slab-send-word,
.a91-slab-send:focus-visible .a91-slab-send-word {
  animation: a91SlabSquash 0.5s ease-in-out;
}

.a91-slab-send:active {
  transform: translate(3px, 3px);
  box-shadow: 0 0 0 transparent;
}

@keyframes a91SlabSquash {
  0%, 100% { transform: scaleY(1); }
  45%      { transform: scaleY(0.86) scaleX(1.03); }
}

/* Submit hands the whole box over to a fluid collapse. */
.a91-slab-form.is-sending .a91-slab-send { animation: a91SlabDispatch 0.85s cubic-bezier(0.3, 0.9, 0.2, 1) forwards; }

@keyframes a91SlabDispatch {
  0%   { min-height: 6rem;  background: var(--slab-ink); }
  40%  { min-height: 11rem; background: var(--slab-pink); }
  100% { min-height: 4rem;  background: var(--slab-ink); }
}

.a91-slab-form.is-sending .a91-slab-cell { animation: a91SlabSettle 0.6s ease forwards; }

@keyframes a91SlabSettle {
  0%   { min-height: 9rem; }
  100% { min-height: 6rem; }
}

/* ------------------------------------------------------- channel index wall */

.a91-slab-index-wall { margin-top: clamp(3rem, 8vw, 6rem); display: grid; gap: clamp(1rem, 3vw, 1.75rem); }

.a91-slab-h2 {
  margin: 0;
  font-family: 'Archivo Black', sans-serif;
  font-size: clamp(1.25rem, 4vw, 2.5rem);
  letter-spacing: -0.02em;
  text-transform: uppercase;
}

.a91-slab-channels {
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 0;
  border: var(--slab-wall) solid var(--slab-ink);
}

.a91-slab-channel {
  padding: 1rem 1.1rem;
  border-right: 2px solid var(--slab-ink);
  border-bottom: 2px solid var(--slab-ink);
  transition: background 0.15s ease, color 0.15s ease;
}

.a91-slab-channel:hover,
.a91-slab-channel:focus-within { background: var(--slab-ink); color: var(--slab-page); }
.a91-slab-channel:hover .a91-slab-channel-num,
.a91-slab-channel:focus-within .a91-slab-channel-num { background: var(--slab-pink); color: var(--slab-ink); }

.a91-slab-channel dt {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.28em;
  text-transform: uppercase;
}

.a91-slab-channel-num {
  padding: 0.1rem 0.35rem;
  background: var(--slab-ink);
  color: var(--slab-page);
  letter-spacing: 0.1em;
}

.a91-slab-channel dd {
  margin: 0.6rem 0 0;
  font-family: 'Archivo Black', sans-serif;
  font-size: clamp(0.85rem, 1.6vw, 1.1rem);
  line-height: 1.25;
  word-break: break-word;
}

.a91-slab-channel dd a { text-decoration: underline; text-decoration-thickness: 3px; }
.a91-slab-channel:hover dd a { text-decoration-color: var(--slab-pink); }

/* ------------------------------------------------ corner index nav (unique) */

.a91-slab-index { position: fixed; inset: 0; z-index: 50; pointer-events: none; }

.a91-slab-index-block {
  position: absolute;
  display: flex;
  pointer-events: auto;
  background: var(--slab-ink);
  border: 3px solid var(--slab-ink);
}

.a91-slab-index-block--tl { top: 0; left: 0; }
.a91-slab-index-block--tr { top: 0; right: 0; }
.a91-slab-index-block--bl { bottom: 3.25rem; left: 0; }
.a91-slab-index-block--br { bottom: 3.25rem; right: 0; }

.a91-slab-index-block a {
  display: flex;
  align-items: baseline;
  gap: 0.4rem;
  padding: 0.55rem 0.85rem;
  background: var(--slab-ink);
  color: var(--slab-page);
  text-decoration: none;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  transition: background 0.14s ease, color 0.14s ease;
}

.a91-slab-index-block a + a { border-left: 2px solid var(--slab-page); }

.a91-slab-index-block a:hover,
.a91-slab-index-block a:focus-visible { background: var(--slab-pink); color: var(--slab-ink); }

.a91-slab-index-code { opacity: 0.75; }
.a91-slab-index-block a:hover .a91-slab-index-code { opacity: 1; }
.a91-slab-index-label { font-family: 'Archivo Black', sans-serif; font-size: 0.82rem; letter-spacing: 0.04em; }

/* --------------------------------------------------------------- responsive */

@media (max-width: 720px) {
  :root { --slab-wall: 4px; }

  .a91-slab { padding-top: 5.5rem; padding-bottom: 7rem; }
  body.a91-has-axis.a91-slab-page .a91-slab {
    padding-right: clamp(1rem, 4vw, 1.5rem);
  }

  .a91-slab-form { grid-template-columns: minmax(0, 1fr); }
  .a91-slab-cell--name,
  .a91-slab-cell--email,
  .a91-slab-cell--phone,
  .a91-slab-cell--msg { grid-column: 1; border-right: 0; }
  .a91-slab-send { grid-column: 1; width: 100%; }

  .a91-slab-index-block--bl,
  .a91-slab-index-block--br { bottom: 4.5rem; }
  .a91-slab-index-label {
    display: inline;
    font-size: 0.68rem;
    max-width: 4.2rem;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .a91-slab-index-block a { padding: 0.5rem 0.65rem; }
}

@media (prefers-reduced-motion: reduce) {
  .a91-slab-cell.is-breathing,
  .a91-slab-cell--msg.is-breathing,
  .a91-slab-form.is-sending .a91-slab-send,
  .a91-slab-form.is-sending .a91-slab-cell,
  .a91-slab-send:hover .a91-slab-send-word { animation: none; }
  .a91-slab-send,
  .a91-slab-send::after { transition: none; }
}