/* ==========================================================================
   KEFI HEALTHCARE  ·  MAIN PAGES
   About Us, Careers, Contact Us, Gallery, Book Appointment.
   Cards, grids and icons come from service-pages.css; this file holds the
   components those five pages add on top.
   ========================================================================== */

/* --------------------------------------------------------------
   1. SECTION RHYTHM
   -------------------------------------------------------------- */
.about-story-section,
.core-values-section,
.gallery-section{
  position:relative;
  padding-block: clamp(62px, 7.5vw, 104px);
  background:
    radial-gradient(110% 55% at 92% -8%, rgba(187,62,151,.07), transparent 58%),
    radial-gradient(85% 50% at -6% 6%, rgba(90,46,145,.06), transparent 60%),
    var(--paper);
}

.mission-vision-section,
.appointment-process-section{
  position:relative;
  padding-block: clamp(58px, 7vw, 96px);
  background: var(--paper-2);
  border-top:1px solid var(--line-2);
  border-bottom:1px solid var(--line-2);
}

/* --------------------------------------------------------------
   1b. #apply  (careers)
   Same shape as the home page contact block: pitch on the left,
   stripped form on the right, on a dark panel.
   -------------------------------------------------------------- */
#apply{
  position:relative;
  padding-block: clamp(66px, 8vw, 116px);
  background: #120A1E;
  color: rgba(255,255,255,.72);
  overflow:hidden;
  isolation:isolate;
}
#apply::after{
  content:"";
  position:absolute;
  right:-10%; top:-30%;
  width:620px; height:620px;
  border-radius:50%;
  z-index:0;
  background: radial-gradient(circle, rgba(187,62,151,.18), transparent 66%);
  pointer-events:none;
}
#apply > .container{ position:relative; z-index:1; }

#apply .section-header{ max-width:820px; }
#apply .section-eyebrow{ color:#E9A8D6; }
#apply .section-header h2{ color:#fff; }
#apply .section-header h2 .gradient-text{
  background: linear-gradient(110deg, #FFFFFF 0%, #F6D7EC 45%, #E9A8D6 100%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  -webkit-text-fill-color:transparent;
}

#apply .contact-layout{
  display:grid;
  grid-template-columns: .92fr 1.08fr;
  gap: clamp(30px, 4vw, 58px);
  align-items:start;
}

/* ---- left: the pitch and the open roles ---- */
#apply .contact-info > p{ color: rgba(255,255,255,.62); max-width:46ch; }
#apply .contact-info h4{ color:#fff; }

#apply .contact-cards{ display:flex; flex-direction:column; gap:14px; }
#apply .contact-card{
  position:relative;
  display:flex;
  align-items:center;
  gap:18px;
  padding:20px 24px;
  background: rgba(255,255,255,.055);
  border:1px solid rgba(255,255,255,.10);
  border-radius:18px;
  overflow:hidden;
  transition: background .35s var(--ease), border-color .35s var(--ease),
              transform .4s var(--ease-out);
}
#apply .contact-card::before{
  content:"";
  position:absolute;
  left:0; top:0; bottom:0;
  width:3px;
  background: var(--grad);
  transform: scaleY(0);
  transition: transform .45s var(--ease-out);
}
#apply .contact-card:hover{
  background: rgba(255,255,255,.10);
  border-color: rgba(233,168,214,.34);
  transform: none;
}
#apply .contact-card:hover::before{ transform: scaleY(1); }
#apply .contact-card-icon{
  flex:0 0 52px;
  width:52px; height:52px;
  display:grid;
  place-items:center;
  border-radius:15px;
  background: var(--grad);
  border:0;
  color:#fff;
  -webkit-text-fill-color:#fff;
  font-size:1.06rem;
  box-shadow: 0 10px 22px -12px rgba(187,62,151,.9);
}
#apply .contact-card h4{ color:#fff; margin:0; }

/* ---- right: the application form ---- */
#apply .form-wrapper{
  padding:0;
  background:none;
  border:0;
  border-radius:0;
  box-shadow:none;
  overflow:visible;
}
#apply .form-wrapper::before{ display:none; }

#apply .form-group{
  position:relative;
  display:flex;
  flex-direction:column-reverse;
  margin-bottom: clamp(24px, 2.8vw, 36px);
}
#apply .form-group input,
#apply .form-group select,
#apply .form-group textarea{
  width:100%;
  padding:10px 2px;
  background:none;
  border:0;
  border-bottom:1px solid rgba(255,255,255,.28);
  border-radius:0;
  color:#fff;
  box-shadow:none;
  transition: border-color .3s var(--ease);
}
#apply .form-group textarea{ min-height:96px; resize:vertical; }
#apply .form-group select{
  padding:10px 30px 10px 2px;
  cursor:pointer;
  appearance:none;
  -webkit-appearance:none;
  background-image:none;
}
#apply .form-group select option{ background:#120A1E; color:#fff; }
#apply .form-group input:focus,
#apply .form-group select:focus,
#apply .form-group textarea:focus{
  outline:none;
  border-bottom-color:#E9A8D6;
  background:none;
  box-shadow:none;
}
#apply .form-group label{
  position:static;
  transform:none;
  margin-bottom:4px;
  color: rgba(255,255,255,.55);
  pointer-events:auto;
  transition: color .3s var(--ease);
}
#apply .form-group:focus-within label{ color:#E9A8D6; }
#apply .form-group input::placeholder,
#apply .form-group textarea::placeholder{ color:transparent; }

/* the select keeps its own chevron element */
#apply .career-form .form-group > i.fa-chevron-down{
  position:absolute;
  right:4px;
  top:auto;
  bottom:14px;
  transform:none;
  color: rgba(255,255,255,.55);
}
#apply .career-form .form-group:focus-within > i.fa-chevron-down{ color:#E9A8D6; }

/* ---- resume dropzone on dark ---- */
#apply .file-upload-label{
  border:1.5px dashed rgba(255,255,255,.3);
  background: rgba(255,255,255,.04);
  color: rgba(255,255,255,.82);
}
#apply .file-upload-wrapper:hover .file-upload-label,
#apply .file-upload-input:focus-visible + .file-upload-label{
  border-color:#E9A8D6;
  background: rgba(255,255,255,.08);
}
#apply .file-upload-wrapper.has-file .file-upload-label{
  border-style:solid;
  border-color: rgba(233,168,214,.6);
  background: rgba(255,255,255,.08);
}
#apply .file-name-display{ color: rgba(255,255,255,.5); }
#apply .file-upload-wrapper.has-file .file-name-display{ color:#E9A8D6; }

#apply .btn-submit{
  width:auto;
  min-width:220px;
  margin-top:8px;
  padding:16px 34px;
  border-radius:4px;
  background:none;
  border:1px solid rgba(255,255,255,.5);
  color:#fff;
  letter-spacing:.06em;
  text-transform:uppercase;
  box-shadow:none;
  transition: background .35s var(--ease), border-color .35s var(--ease),
              color .35s var(--ease), transform .35s var(--ease-out);
}
#apply .btn-submit:hover{
  background:#fff;
  border-color:#fff;
  color:#120A1E;
  transform: translateY(-2px);
  box-shadow:none;
}
#apply .btn-submit:hover i{ transform:none; }

@media (max-width:1024px){
  #apply .contact-layout{ grid-template-columns:1fr; }
  #apply .contact-info > p{ max-width:none; }
}
@media (max-width:900px){
  #apply .btn-submit{ width:100%; }
  #apply .contact-card:hover{ transform:none; }
}

/* --------------------------------------------------------------
   2. ABOUT · STORY SPLIT
   -------------------------------------------------------------- */
.story-grid{
  display:grid;
  grid-template-columns: .92fr 1.08fr;
  gap: clamp(34px, 4.6vw, 70px);
  align-items:center;
}

.story-image-wrap{
  position:relative;
  border-radius: var(--r-xl);
  isolation:isolate;
}
.story-image-wrap::before{
  content:"";
  position:absolute;
  inset:20px 20px -20px -20px;
  border-radius: var(--r-xl);
  background: var(--grad);
  opacity:.15;
  z-index:-1;
}
.story-image-wrap > img{
  position:relative;
  z-index:1;
  width:100%;
  aspect-ratio: 4 / 3.4;
  object-fit:cover;
  border-radius: var(--r-xl);
  border:1px solid var(--line);
  background:
    linear-gradient(120deg, rgba(90,46,145,.10) 0%, rgba(187,62,151,.10) 100%),
    var(--paper-2);
  box-shadow: var(--sh-3);
}
.story-image-wrap > img.img-missing{ font-size:0; color:transparent; }

/* the years-of-experience plaque that overlaps the photo */
.story-badge{
  position:absolute;
  right:-14px;
  bottom:-22px;
  z-index:2;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:2px;
  min-width:148px;
  padding:20px 24px;
  border-radius: var(--r-lg);
  background: var(--grad);
  color:#fff;
  text-align:center;
  box-shadow: 0 26px 52px -22px rgba(90,46,145,.9);
}
.story-badge span{
  font-family: var(--font-head);
  font-size: clamp(1.7rem, 1.4rem + 1vw, 2.1rem);
  font-weight:800;
  line-height:1;
  letter-spacing:-.03em;
}
.story-badge small{
  font-family: var(--font-head);
  font-size:.68rem;
  font-weight:700;
  letter-spacing:.14em;
  text-transform:uppercase;
  opacity:.88;
}

.story-content h2{ margin:0 0 1.1rem; }
.story-content p{
  font-size:1.02rem;
  line-height:1.82;
  color: var(--ink-3);
}
.story-content p:last-child{ margin-bottom:0; }

/* --------------------------------------------------------------
   3. ABOUT · MISSION & VISION
   -------------------------------------------------------------- */
.mv-grid{
  grid-template-columns: repeat(auto-fit, minmax(min(330px, 100%), 1fr));
  gap: clamp(20px, 2.4vw, 30px);
}

.mv-card{ padding: clamp(30px, 3.4vw, 42px); }
.mv-card .mv-icon{
  width:60px; height:60px;
  border-radius:18px;
  font-size:1.36rem;
}
.mv-card h3{ font-size: clamp(1.14rem, 1.02rem + .4vw, 1.36rem) !important; }
.mv-card p{ font-size:.97rem !important; line-height:1.8 !important; }

/* the vision card leads with the second brand tone so the pair reads as a set */
.mv-card.vision .mv-icon{
  background: linear-gradient(135deg, rgba(90,46,145,.16), rgba(187,62,151,.10));
  color: var(--magenta);
}

/* --------------------------------------------------------------
   4. ABOUT · CORE VALUES
   Five values whose sentences run from 42 to 61 characters. Anything
   that anchors the copy to the bottom of the card turns that spread
   into five different baselines, so the copy sits directly under the
   heading instead and reserves three lines whether it needs them or
   not. The five icons carry the colour, stepping from plum to magenta
   across the set; the cards themselves stay white so the row reads as
   one family rather than five coloured blocks.
   -------------------------------------------------------------- */
.core-values-section > .container > .section-eyebrow{ justify-content:center; }
.core-values-section > .container > h2{ margin:0 0 .7rem; }

.values-lede{
  margin:0 auto clamp(34px, 4vw, 54px);
  max-width:52ch;
  color: var(--ink-3);
}

.values-grid{
  grid-template-columns: repeat(5, minmax(0,1fr));
  gap: clamp(14px, 1.6vw, 22px);
  align-items:stretch;
}

.core-values-section .value-item{
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  padding: clamp(28px, 3vw, 40px) clamp(15px, 1.7vw, 24px);
  border-radius:16px;
  border:1px solid var(--line);
  background: var(--paper);
  box-shadow:none;
  transition: border-color .35s var(--ease), background .35s var(--ease),
              box-shadow .4s var(--ease-out);
}
.core-values-section .value-item::before{ display:none; }
.core-values-section .value-item:hover{
  background: var(--paper-3);
  border-color: rgba(187,62,151,.38);
  box-shadow: 0 20px 42px -28px rgba(58,24,96,.5);
}

/* a filled rounded square rather than a ring, so the icon reads as the
   card's one piece of colour */
.core-values-section .value-icon{
  width: clamp(56px, 5vw, 66px);
  aspect-ratio:1;
  margin:0 0 clamp(18px, 2vw, 24px);
  display:grid;
  place-items:center;
  border:0;
  border-radius:19px;
  background: var(--val-fill);
  color:#fff;
  box-shadow: 0 14px 26px -16px var(--val-fill);
  transition: box-shadow .4s var(--ease-out);
}
.core-values-section .value-icon i{
  font-size: clamp(1.18rem, 1rem + .45vw, 1.42rem);
  color:#fff;
}
.core-values-section .value-item:hover .value-icon{
  box-shadow: 0 18px 32px -14px var(--val-fill);
}

.core-values-section .value-item:nth-child(1){ --val-fill:#4A2280; }
.core-values-section .value-item:nth-child(2){ --val-fill:#5A2E91; }
.core-values-section .value-item:nth-child(3){ --val-fill:#7B3391; }
.core-values-section .value-item:nth-child(4){ --val-fill:#9C3894; }
.core-values-section .value-item:nth-child(5){ --val-fill:#BB3E97; }

.core-values-section .value-item h4{
  margin:0 0 .6rem;
  color: var(--ink);
}
/* three lines are reserved for every card, which is what the longest
   sentence needs, so the five blocks start and end level */
.core-values-section .value-item p{
  margin:0;
  color: var(--ink-3);
  line-height:1.62;
  min-height: calc(3 * 1.62em);
}

/* Five cards never fill a row of three or two, so the tracks are
   doubled and each card spans two of them. That lets the short last
   row start half a track in and sit centred under the row above,
   instead of hanging off the left with a hole on the right. */
@media (max-width:1100px){
  .values-grid{ grid-template-columns: repeat(6, minmax(0,1fr)); }
  .core-values-section .value-item{ grid-column: auto / span 2; }
  .core-values-section .value-item:nth-child(4){ grid-column: 2 / span 2; }
}
@media (max-width:760px){
  .values-grid{ grid-template-columns: repeat(4, minmax(0,1fr)); }
  .core-values-section .value-item{ grid-column: auto / span 2; }
  .core-values-section .value-item:nth-child(4){ grid-column: auto / span 2; }
  .core-values-section .value-item:nth-child(5){ grid-column: 2 / span 2; }
}
/* one per line: the reserved three lines would only add dead space */
@media (max-width:520px){
  .values-grid{ grid-template-columns: 1fr; }
  .core-values-section .value-item,
  .core-values-section .value-item:nth-child(4),
  .core-values-section .value-item:nth-child(5){ grid-column: 1 / -1; }
  .core-values-section .value-item p{ min-height:0; }
}
/* --------------------------------------------------------------
   5. CAREERS PERKS  +  CONTACT RAPID RESPONSE
   One treatment, shared by "Why Work With Kefi?" on careers and
   "Our Commitment to Support" on contact.

   The previous version stacked three frames on top of each other: a
   drafting grid behind the band, a dashed rectangle around the row,
   and a purple border on every card. Three nested rectangles competed
   for the same edge and the cards read as cells in a table rather
   than as cards. The reframe removes both outer frames and lets the
   cards carry themselves, with a gradient rule along the top edge
   doing the brand work the heavy border used to do.
   -------------------------------------------------------------- */
.careers-perks-section,
.rapid-response-section{
  position:relative;
  padding-block: clamp(58px, 7vw, 96px);
  background:
    radial-gradient(90% 60% at 50% -10%, rgba(187,62,151,.06), transparent 62%),
    var(--paper);
  border-top:1px solid var(--line-2);
  border-bottom:1px solid var(--line-2);
}
.careers-perks-section::before,
.rapid-response-section::before{ content:none; }
.careers-perks-section > .container,
.rapid-response-section > .container{ position:relative; z-index:1; }

/* ---- header: the filled chip stays, the block is centred ---- */
.careers-perks-section .section-header,
.rapid-response-section .section-header{
  text-align:center;
  margin-inline:auto;
  max-width:62ch;
  margin-bottom: clamp(36px, 4.2vw, 58px);
}
.careers-perks-section .section-header .section-eyebrow,
.rapid-response-section .section-header .section-eyebrow{
  display:inline-flex;
  justify-content:center;
  padding:7px 15px;
  margin-bottom:18px;
  border-radius: var(--r-pill);
  background: var(--grad);
  color:#fff;
  letter-spacing:.14em;
}
.careers-perks-section .section-header h2,
.rapid-response-section .section-header h2{ color: var(--ink); }
.careers-perks-section .section-header p,
.rapid-response-section .section-header p{ margin-inline:auto; }

/* ---- the row: no frame, just the cards ---- */
.perks-grid,
.response-grid{
  position:relative;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: clamp(18px, 2vw, 26px);
  align-items:stretch;
  padding:0;
}
/* Three cards do not fill a row of two, so the tracks are doubled and
   each card spans two of them. The third then starts half a track in
   and sits centred under the pair above, rather than hanging left. */
@media (max-width:980px){
  .perks-grid,
  .response-grid{ grid-template-columns: repeat(4, minmax(0,1fr)); }
  .perk-card,
  .response-card{ grid-column: auto / span 2; }
  .perk-card:nth-child(3),
  .response-card:nth-child(3){ grid-column: 2 / span 2; }
}
@media (max-width:620px){
  .perks-grid,
  .response-grid{ grid-template-columns: 1fr; }
  .perk-card,
  .response-card,
  .perk-card:nth-child(3),
  .response-card:nth-child(3){ grid-column: 1 / -1; }
}
.perks-grid::before,
.response-grid::before{ content:none; }

/* ---- a card ---- */
.perk-card,
.response-card{
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  text-align:left;
  padding: clamp(26px, 2.8vw, 34px);
  background: var(--paper);
  border:1px solid var(--line);
  border-radius:16px;
  box-shadow:none;
  overflow:hidden;
  isolation:isolate;
  transition: border-color .35s var(--ease), box-shadow .45s var(--ease-out);
}

/* the gradient rule wipes across the top edge on hover, the same
   gesture the home page cards use */
.perk-card::before,
.response-card::before{
  content:"";
  display:block;
  position:absolute;
  top:0; left:0; right:0;
  height:3px;
  background: var(--grad);
  transform: scaleX(0);
  transform-origin:left;
  transition: transform .5s var(--ease-out);
}
.perk-card:hover::before,
.response-card:hover::before{ transform: scaleX(1); }
.perk-card:hover,
.response-card:hover{
  border-color: rgba(187,62,151,.38);
  box-shadow: 0 22px 44px -28px rgba(58,24,96,.5);
}

/* the icon keeps its filled tile, rounded to the site's radius */
.perk-card .perk-icon,
.response-card .response-icon-wrap{
  width: clamp(52px, 4.6vw, 58px);
  aspect-ratio:1;
  height:auto;
  margin:0 0 clamp(20px, 2.2vw, 26px);
  display:grid;
  place-items:center;
  border:0;
  border-radius:18px;
  background: var(--grad);
  color:#fff;
  box-shadow: 0 14px 26px -16px rgba(187,62,151,.9);
  transition: box-shadow .4s var(--ease-out);
}
.perk-card .perk-icon::after,
.response-card .response-icon-wrap::after{ display:none; }
.perk-card .perk-icon i,
.response-card .response-icon-wrap i{ font-size:1.16rem; color:#fff; }
.perk-card:hover .perk-icon,
.response-card:hover .response-icon-wrap{
  box-shadow: 0 18px 32px -14px rgba(187,62,151,.95);
}

/* sentence case: the headings were uppercase and letterspaced, which
   shouted and wrapped badly on the longer ones */
.perk-card h3,
.response-card h3{
  margin:0 0 .75rem;
  padding:0;
  color: var(--ink);
  text-transform:none;
  letter-spacing:-.01em;
  line-height:1.3;
  transition: color .35s var(--ease);
}
.perk-card:hover h3,
.response-card:hover h3{ color: var(--plum); }

.perk-card p,
.response-card p{
  margin:0;
  padding:0;
  color: var(--ink-3);
  max-width:40ch;
}

@media (max-width:768px){
  .careers-perks-section .section-header,
  .rapid-response-section .section-header{ max-width:none; }
  .perk-card p,
  .response-card p{ max-width:none; }
}
/* --------------------------------------------------------------
   6. CONTACT · RAPID RESPONSE
   -------------------------------------------------------------- */
/* the response cards now follow the blueprint layout above */

/* --------------------------------------------------------------
   7. APPOINTMENT · PROCESS STEPS
   -------------------------------------------------------------- */
.process-grid{
  grid-template-columns: repeat(auto-fit, minmax(min(262px, 100%), 1fr));
  gap: clamp(20px, 2.6vw, 34px);
}

.process-step{
  align-items:center;
  text-align:center;
  padding-top: clamp(34px, 3.6vw, 44px);
}

/* `.step-number` is an empty div in the source and the original stylesheet
   never fills it, so it is treated as a decorative marker. Adding a numeral
   here would put text on the page that the client never wrote. */
.step-number{
  position:relative;
  display:grid;
  place-items:center;
  width:56px; height:56px;
  margin:0 auto 20px;
  border-radius:50%;
  background: var(--grad-soft);
  border:1px solid rgba(187,62,151,.18);
  transition: background .45s var(--ease), border-color .45s var(--ease),
              transform .5s var(--ease-out);
}
.step-number::before{
  content:"";
  width:14px; height:14px;
  border-radius:50%;
  background: var(--grad);
  transition: transform .45s var(--ease-out);
}
.process-step:hover .step-number{
  background: var(--grad);
  border-color:transparent;
  transform: none;
}
/* the dot flips to white so it stays visible once the ring fills */
.process-step:hover .step-number::before{
  background:#fff;
  transform: none;
}

/* a connector between the steps on wide screens */
@media (min-width:860px){
  .process-step::after{
    content:"";
    position:absolute;
    top: calc(clamp(34px, 3.6vw, 44px) + 30px);
    right: calc(-1 * clamp(20px, 2.6vw, 34px) / 2 - 5px);
    width: clamp(20px, 2.6vw, 34px);
    height:2px;
    background: linear-gradient(90deg, rgba(187,62,151,.4), rgba(90,46,145,.12));
  }
  .process-step:last-child::after{ display:none; }
}

/* --------------------------------------------------------------
   8. GALLERY
   -------------------------------------------------------------- */
.gallery-intro{
  max-width: 68ch;
  margin: 0 auto clamp(34px, 4vw, 52px);
  text-align:center;
}
.gallery-intro p{
  font-size:1.03rem;
  line-height:1.8;
  color: var(--ink-3);
  margin:0;
}

/* A bento: two items claim extra width or height so the wall is not a
   uniform checkerboard. */
.gallery-grid{
  display:grid;
  grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr));
  grid-auto-rows: 232px;
  grid-auto-flow: dense;
  gap: clamp(12px, 1.5vw, 18px);
}
.gallery-item{
  position:relative;
  grid-column: span 1;
  grid-row: span 1;
  border-radius: var(--r-lg);
  overflow:hidden;
  isolation:isolate;
  background:
    linear-gradient(120deg, rgba(90,46,145,.10) 0%, rgba(187,62,151,.10) 100%),
    var(--paper-2);
  border:1px solid var(--line);
  transition: box-shadow .45s var(--ease), border-color .35s var(--ease),
              transform .5s var(--ease-out);
}
.gallery-item.item-wide{ grid-column: span 2; }
.gallery-item.item-tall{ grid-row: span 2; }

.gallery-item:hover{
  transform: none;
  border-color: rgba(187,62,151,.3);
  box-shadow: var(--sh-3);
}

.gallery-img{
  width:100%;
  height:100%;
  object-fit:cover;
  transition: transform 1.1s var(--ease-out), filter .5s var(--ease);
}
.gallery-item:hover .gallery-img{ transform: none; }
.gallery-img.img-missing{ font-size:0; color:transparent; }

/* placeholder marker, shown only when the photo is genuinely absent */
.gallery-item.has-placeholder::after{
  content:"\f03e";
  font-family:"Font Awesome 6 Free";
  font-weight:900;
  position:absolute;
  inset:0;
  display:grid;
  place-items:center;
  font-size:1.9rem;
  color: rgba(90,46,145,.24);
  pointer-events:none;
}

.gallery-overlay{
  position:absolute;
  inset:0;
  z-index:2;
  display:flex;
  align-items:flex-end;
  padding: clamp(18px, 2vw, 24px);
  background: linear-gradient(to top,
    rgba(23,9,40,.88) 0%, rgba(23,9,40,.42) 44%, rgba(23,9,40,.06) 74%);
  opacity:0;
  transition: opacity .45s var(--ease);
}
.gallery-item:hover .gallery-overlay,
.gallery-item:focus-within .gallery-overlay{ opacity:1; }

.overlay-content{
  transform: translateY(12px);
  transition: transform .5s var(--ease-out);
}
.gallery-item:hover .overlay-content{ transform: translateY(0); }

.overlay-cat{
  display:inline-block;
  margin-bottom:9px;
  padding:5px 12px;
  border-radius: var(--r-pill);
  background: var(--grad);
  font-family: var(--font-head);
  font-size:.62rem;
  font-weight:800;
  letter-spacing:.13em;
  text-transform:uppercase;
  color:#fff;
}
.overlay-content h3{
  margin:0;
  font-size: clamp(.98rem, .92rem + .3vw, 1.14rem);
  font-weight:800;
  line-height:1.35;
  color:#fff;
}

/* On touch there is no hover, so the caption stays readable. */
@media (hover: none){
  .gallery-overlay{ opacity:1; }
  .overlay-content{ transform:none; }
}

/* --------------------------------------------------------------
   9. CAREERS FORM
   -------------------------------------------------------------- */
.form-wrapper{
  position:relative;
  padding: clamp(26px, 3.2vw, 42px);
  background: var(--paper);
  border:1px solid var(--line);
  border-radius: var(--r-xl);
  box-shadow: var(--sh-3);
  overflow:hidden;
}
.form-wrapper::before{
  content:"";
  position:absolute;
  top:0; left:0; right:0;
  height:4px;
  background: var(--grad);
}

/* the source pairs the select with its own chevron element */
.career-form .form-group:has(select){ position:relative; }
.career-form select.form-control{
  appearance:none;
  -webkit-appearance:none;
  cursor:pointer;
  padding:17px 46px 17px 18px;
  background-image:none;
}
.career-form .form-group > i.fa-chevron-down{
  position:absolute;
  right:20px;
  top:50%;
  transform: translateY(-50%);
  font-size:.76rem;
  color: var(--ink-3);
  pointer-events:none;
  transition: color .3s var(--ease);
}
.career-form .form-group:focus-within > i.fa-chevron-down{ color: var(--magenta); }

/* ---- file upload ---- */
.file-upload-wrapper{
  position:relative;
  margin-bottom:16px;
}

/* the real input stays reachable by keyboard but is visually replaced */
.file-upload-input{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  opacity:0;
  cursor:pointer;
}

.file-upload-label{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  padding:22px 20px;
  border-radius: var(--r-md);
  border:1.5px dashed rgba(90,46,145,.32);
  background: var(--paper-2);
  font-family: var(--font-head);
  font-size:.93rem;
  font-weight:650;
  color: var(--plum);
  text-align:center;
  cursor:pointer;
  transition: border-color .3s var(--ease), background .3s var(--ease), color .3s var(--ease);
}
.file-upload-label i{ font-size:1.12rem; }

.file-upload-wrapper:hover .file-upload-label,
.file-upload-input:focus-visible + .file-upload-label{
  border-color: var(--magenta);
  background: var(--tint);
}
/* set by main.js once a file is chosen */
.file-upload-wrapper.has-file .file-upload-label{
  border-style:solid;
  border-color: rgba(187,62,151,.45);
  background: var(--tint);
}

.file-name-display{
  display:block;
  margin-top:9px;
  font-size:.82rem;
  color: var(--ink-3);
  text-align:center;
  word-break:break-all;
}
.file-upload-wrapper.has-file .file-name-display{
  color: var(--plum);
  font-weight:650;
}

/* --------------------------------------------------------------
   10. RESPONSIVE
   -------------------------------------------------------------- */
@media (max-width:1024px){
  .story-grid{ grid-template-columns: 1fr; }
  /* see .about-image-stack: auto margins cancel stretch on a grid item */
  .story-image-wrap{ width:100%; max-width:560px; margin-inline:auto; }
}

@media (max-width:980px){
  /* a wide tile would take the whole row at two columns */
  .gallery-item.item-wide{ grid-column: span 1; }
  .gallery-grid{ grid-auto-rows: 206px; }
}

@media (max-width:768px){
  .gallery-grid{
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: 172px;
  }
  .gallery-item,
  .gallery-item.item-wide,
  .gallery-item.item-tall{ grid-column: span 1; grid-row: span 1; }
  .gallery-item:hover,
  .mv-card:hover,
  .value-item:hover,
  .perk-card:hover,
  .response-card:hover,
  .process-step:hover{ transform:none; }

  .story-badge{ right:-6px; bottom:-16px; min-width:128px; padding:16px 20px; }
}

@media (max-width:560px){
  .gallery-grid{ grid-template-columns: 1fr; grid-auto-rows: 218px; }
  .story-image-wrap::before{ inset:14px 14px -14px -14px; }
}

/* --------------------------------------------------------------
   The application form takes the same treatment as the contact form
   on every other page: a light panel on the dark band, captions above
   boxed fields, and a full width submit.
   -------------------------------------------------------------- */
#apply .form-wrapper{
  padding: clamp(24px, 2.6vw, 34px);
  background: var(--paper);
  border:1px solid rgba(28,18,48,.10);
  border-radius:16px;
  box-shadow: 0 34px 70px -34px rgba(0,0,0,.65);
  overflow:visible;
}

#apply .form-group{ margin-bottom:18px; }

#apply .form-group label{
  margin:0 0 8px;
  font-family: var(--font-head);
  font-weight:700;
  color: var(--ink);
}
#apply .form-group:focus-within label{ color: var(--plum); }

#apply .form-group input,
#apply .form-group textarea{
  padding:14px 16px;
  background:#fff;
  border:1px solid rgba(28,18,48,.14);
  border-radius:8px;
  color: var(--ink);
}
#apply .form-group select{
  padding:14px 42px 14px 16px;
  background-color:#fff;
  border:1px solid rgba(28,18,48,.14);
  border-radius:8px;
  color: var(--ink);
}
#apply .form-group select option{ background:#fff; color: var(--ink); }
#apply .form-group textarea{ min-height:112px; }

/* the dropdown arrow is a real element here, so it is placed rather
   than painted into the background */
#apply .form-group > i{
  color: var(--plum);
  right:18px;
}

#apply .form-group input:focus,
#apply .form-group select:focus,
#apply .form-group textarea:focus{
  border-color: var(--magenta);
  box-shadow: 0 0 0 4px rgba(187,62,151,.10);
}

#apply .form-group input::placeholder,
#apply .form-group textarea::placeholder{ color: var(--ink-3); }

#apply .btn-submit{
  width:100%;
  min-width:0;
  justify-content:center;
  padding:16px 28px;
  border-radius:8px;
  border:0;
  background: var(--grad);
  color:#fff;
  text-transform:none;
  letter-spacing:.01em;
}
#apply .btn-submit:hover{
  background: var(--grad);
  color:#fff;
  transform:none;
  box-shadow: 0 18px 34px -18px rgba(187,62,151,.75);
}

/* the dropzone was drawn for the dark form; on the light panel it has
   to swap to brand ink or it disappears into the white */
#apply .file-upload-label{
  border:1.5px dashed rgba(90,46,145,.32);
  background: var(--paper-2);
  color: var(--ink-2);
}
#apply .file-upload-wrapper:hover .file-upload-label,
#apply .file-upload-input:focus-visible + .file-upload-label{
  border-color: var(--magenta);
  background: var(--tint);
}
#apply .file-upload-wrapper.has-file .file-upload-label{
  border-style:solid;
  border-color: rgba(187,62,151,.55);
  background: var(--tint);
}
#apply .file-name-display{ color: var(--ink-3); }
#apply .file-upload-wrapper.has-file .file-name-display{ color: var(--magenta); }

/* the application form's contact icons sit under an id too */
#apply .contact-card:hover .contact-card-icon{
  background: linear-gradient(120deg, #BB3E97 0%, #5A2E91 100%);
  box-shadow: 0 12px 24px -12px rgba(90,46,145,.9);
}