/*
  BlessKuts – About page. Loaded after styles.css, which supplies the nav, buttons, booking banner, footer and colour tokens.
  Sizes follow the 941px-wide reference (design/about-reference.webp), scaled up with clamp() like gallery.css.
*/

.page-about {
  --ab-line: rgba(237, 28, 36, .55);
  --ab-head: 'Poppins', var(--body);
  --ab-inset: clamp(18px, 6vw, 90px);
}
.footer__links a[aria-current="page"] { color: #fff; font-weight: 700; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 5px; }

.ab-wrap { width: 100%; max-width: 1600px; margin-inline: auto; padding-inline: var(--ab-inset); }
.ab-eyebrow { color: var(--red-bright); font-size: clamp(10px, .85vw, 13px); font-weight: 800; letter-spacing: .26em; text-transform: uppercase; }
.ab-title { margin-top: 6px; font: 800 clamp(30px, 3.9vw, 58px) / 1.04 var(--ab-head); letter-spacing: -.02em; color: #fff; }
.ab-title span { color: var(--red); }
.ab-caps { margin-top: 10px; color: #fff; font-size: clamp(11px, 1.05vw, 15px); font-weight: 700; letter-spacing: .32em; text-transform: uppercase; }

/* Hero ------------------------------------------------------------------- */
.ab-hero {
  position: relative; overflow: hidden; display: flex; align-items: center;
  min-height: calc(var(--nav-h) + clamp(320px, 38vw, 580px)); padding-top: var(--nav-h);
  background: radial-gradient(ellipse 50% 90% at 78% 50%, rgba(140, 10, 16, .32), transparent 70%), #090909;
  border-bottom: 1px solid var(--ab-line);
}
.ab-hero__media { position: absolute; top: 0; right: 0; bottom: 0; width: 58%; }
.ab-hero__media img {
  width: 100%; height: 100%; object-fit: cover; object-position: 40% 30%;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, .25) 8%, rgba(0, 0, 0, .65) 20%, rgba(0, 0, 0, .9) 32%, #000 44%);
          mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, .25) 8%, rgba(0, 0, 0, .65) 20%, rgba(0, 0, 0, .9) 32%, #000 44%);
}
.ab-hero__media::after { /* keep the copy readable where the photo starts */
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(90deg, rgba(9, 9, 9, .5) 0%, rgba(9, 9, 9, .12) 30%, transparent 55%), linear-gradient(0deg, rgba(9, 9, 9, .45), transparent 22%);
}
.ab-hero__content { position: relative; z-index: 1; padding-block: clamp(30px, 3.6vw, 56px); }
.ab-hero__eyebrow { color: #fff; font-size: clamp(11px, .95vw, 14px); font-weight: 600; letter-spacing: .32em; text-transform: uppercase; }
.ab-hero__title { margin-top: 10px; font: 800 clamp(46px, 6.1vw, 92px) / .98 var(--ab-head); letter-spacing: -.035em; color: #fff; }
.ab-hero__title span { color: var(--red); }
.ab-hero__tagline { margin-top: clamp(12px, 1.4vw, 20px); color: #fff; font-size: clamp(12px, 1.3vw, 19px); font-weight: 700; line-height: 1.45; letter-spacing: .32em; text-transform: uppercase; }
.ab-hero__text { max-width: 540px; margin-top: clamp(14px, 1.6vw, 24px); color: #e8e8e8; font-size: clamp(14px, 1.38vw, 20px); line-height: 1.5; }
.ab-hero__actions { display: flex; flex-wrap: wrap; gap: clamp(10px, 1.5vw, 20px); margin-top: clamp(18px, 2.2vw, 32px); }
.ab-hero__actions .btn { height: clamp(40px, 3.6vw, 52px); padding: 0 clamp(18px, 2vw, 30px); font-size: clamp(13px, 1.05vw, 16px); border-radius: 4px; }
.ab-hero__actions .btn svg, .ab-hero__actions .btn [data-lucide] { width: 16px; height: 16px; }

/* The man behind BlessKuts ----------------------------------------------- */
.ab-owner {
  display: grid; grid-template-columns: 52% 1fr; min-height: clamp(360px, 39vw, 600px);
  background: radial-gradient(ellipse 30% 80% at 52% 50%, rgba(120, 8, 14, .25), transparent 70%), #0a0a0a;
  border-bottom: 1px solid var(--ab-line);
}
.ab-owner__media { position: relative; overflow: hidden; }
.ab-owner__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 0%; transition: transform .6s var(--ease); }
.ab-owner__media::after { content: ''; position: absolute; inset: 0 0 0 auto; width: 18%; background: linear-gradient(90deg, transparent, rgba(10, 10, 10, .85)); pointer-events: none; }
.ab-owner__media:hover img { transform: scale(1.02); }
.ab-owner__copy { display: flex; flex-direction: column; justify-content: center; padding: clamp(30px, 3.2vw, 50px) var(--ab-inset) clamp(26px, 2.8vw, 44px) clamp(24px, 3.9vw, 60px); }
.ab-owner__text { max-width: 640px; margin-top: clamp(14px, 1.6vw, 24px); }
.ab-owner__text p { color: #e0e0e0; font-size: clamp(14px, 1.38vw, 20px); line-height: 1.5; }
.ab-owner__text p + p { margin-top: 12px; }
.ab-sign { margin-top: clamp(14px, 1.6vw, 24px); }
.ab-sign__script { display: flex; align-items: center; gap: 18px; color: var(--red); font: 400 clamp(40px, 4.6vw, 68px) / 1 'Mrs Saint Delafield', cursive; }
.ab-sign__script::after { content: ''; width: clamp(50px, 7.5vw, 110px); height: 1px; margin-top: 10px; background: var(--red); }
.ab-sign__role { margin-top: 2px; color: #fff; font-size: clamp(9px, .8vw, 12px); font-weight: 800; letter-spacing: .3em; text-transform: uppercase; }
.ab-sign__place { margin-top: 3px; color: #a9a9a9; font-size: clamp(9px, .75vw, 11px); letter-spacing: .3em; text-transform: uppercase; }

/* Values ------------------------------------------------------------------ */
.ab-values {
  padding: clamp(24px, 2.8vw, 42px) 0 clamp(24px, 2.6vw, 40px);
  background:
    radial-gradient(ellipse 30% 80% at 0% 40%, rgba(120, 6, 14, .4), transparent 75%),
    radial-gradient(ellipse 40% 60% at 100% 100%, rgba(90, 4, 10, .25), transparent 75%),
    #0a0a0a;
  border-bottom: 1px solid var(--ab-line);
}
.ab-values__head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .82fr); align-items: center; gap: 24px 40px; }
.ab-values__lead { max-width: 420px; color: #e0e0e0; font-size: clamp(14px, 1.38vw, 20px); line-height: 1.45; }
.ab-values__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(12px, 1.6vw, 22px); margin-top: clamp(20px, 2.6vw, 38px); }
.ab-value {
  display: flex; align-items: flex-start; gap: clamp(16px, 2vw, 28px); min-height: clamp(104px, 11.6vw, 170px);
  padding: clamp(18px, 2.2vw, 32px) clamp(18px, 2.4vw, 34px);
  border: 1px solid rgba(255, 255, 255, .14); border-radius: 5px; background: rgba(12, 12, 12, .85);
  transition: transform .28s var(--ease), border-color .28s var(--ease), box-shadow .28s var(--ease), background-color .28s var(--ease);
}
.ab-value:hover { transform: translateY(-3px); border-color: rgba(237, 28, 36, .6); background: rgba(30, 8, 10, .85); box-shadow: 0 10px 28px rgba(120, 0, 12, .22); }
.ab-value__icon { width: clamp(40px, 5.2vw, 74px) !important; height: clamp(40px, 5.2vw, 74px) !important; color: var(--red); stroke-width: 2.2; }
.ab-value h3 { margin: 0; color: #fff; font: 700 clamp(16px, 1.6vw, 23px) / 1.2 var(--ab-head); }
.ab-value p { margin-top: 8px; color: #c9c9c9; font-size: clamp(13px, 1.22vw, 17.5px); line-height: 1.45; }

/* The space ---------------------------------------------------------------- */
.ab-space {
  position: relative; overflow: hidden; display: flex; align-items: center; min-height: clamp(300px, 30.5vw, 470px);
  background: radial-gradient(ellipse 35% 80% at 0% 50%, rgba(110, 6, 12, .45), transparent 75%), #0a0a0a;
  border-bottom: 1px solid var(--ab-line);
}
.ab-space__media { position: absolute; top: 0; right: 0; bottom: 0; width: 66%; }
.ab-space__media img {
  width: 100%; height: 100%; object-fit: cover; object-position: 68% 58%;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, .35) 10%, rgba(0, 0, 0, .8) 24%, #000 36%);
          mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, .35) 10%, rgba(0, 0, 0, .8) 24%, #000 36%);
}
.ab-space__copy { position: relative; z-index: 1; padding-block: clamp(30px, 3.6vw, 54px); }
.ab-space__copy > * { max-width: 520px; }
.ab-space__text { margin-top: clamp(14px, 1.6vw, 22px); color: #e0e0e0; font-size: clamp(14px, 1.38vw, 20px); line-height: 1.5; text-shadow: 0 1px 8px rgba(0, 0, 0, .6); }
.ab-outline-btn {
  display: inline-flex; align-items: center; gap: 12px; height: clamp(38px, 3.6vw, 50px); margin-top: clamp(16px, 2vw, 28px); padding: 0 clamp(18px, 2vw, 26px);
  border: 1px solid rgba(255, 255, 255, .85); border-radius: 4px; background: rgba(0, 0, 0, .35); color: #fff;
  font-size: clamp(13px, 1.05vw, 16px); font-weight: 600; transition: background-color .25s var(--ease), color .25s var(--ease), transform .25s var(--ease);
}
.ab-outline-btn svg { width: 15px; height: 15px; transition: transform .25s var(--ease); }
.ab-outline-btn:hover { background: #fff; color: var(--ink); transform: translateY(-1px); }
.ab-outline-btn:hover svg { transform: translate(2px, -2px); }

/* Quote ------------------------------------------------------------------------ */
.ab-quote { position: relative; overflow: hidden; display: grid; place-items: center; min-height: clamp(150px, 14.7vw, 230px); background: #1a0204; border-bottom: 1px solid var(--ab-line); }
.ab-quote__bg {
  position: absolute; inset: 0;
  background:
    linear-gradient(90deg, rgba(20, 2, 4, .55) 0%, rgba(26, 2, 4, .92) 30%, rgba(26, 2, 4, .92) 70%, rgba(20, 2, 4, .55) 100%),
    url('../assets/img/booking-banner-1200.webp') center / cover no-repeat;
  filter: saturate(.9);
}
.ab-quote__inner { position: relative; z-index: 1; width: min(100% - 36px, 720px); margin: 0; padding: clamp(26px, 3vw, 44px) 0; text-align: center; }
.ab-quote__mark {
  position: absolute; left: clamp(-150px, -9vw, -40px); top: clamp(4px, .6vw, 12px);
  color: rgba(200, 20, 30, .6); font: italic 700 clamp(70px, 8.5vw, 130px) / 1 Georgia, 'Times New Roman', serif;
}
.ab-quote blockquote { margin: 0; }
.ab-quote blockquote p { color: #fff; font: italic 400 clamp(17px, 1.95vw, 29px) / 1.4 Georgia, 'Times New Roman', serif; }
.ab-quote figcaption { display: grid; justify-items: center; margin-top: clamp(14px, 1.6vw, 22px); }
.ab-quote figcaption strong {
  display: flex; align-items: center; gap: 18px; color: #fff; font-size: clamp(9px, .85vw, 12px); font-weight: 800; letter-spacing: .32em; text-transform: uppercase;
}
.ab-quote figcaption strong::before, .ab-quote figcaption strong::after { content: ''; width: clamp(40px, 8.5vw, 120px); height: 1px; background: rgba(237, 28, 36, .7); }
.ab-quote figcaption span { margin-top: 4px; color: #b9a6a6; font-size: clamp(8px, .7vw, 10.5px); letter-spacing: .3em; text-transform: uppercase; }

/* Tablet: 768–1023px ----------------------------------------------------------- */
@media (max-width: 1023px) {
  .ab-hero__media { width: 70%; }
  .ab-hero__media::after { background: linear-gradient(90deg, rgba(9, 9, 9, .75) 0%, rgba(9, 9, 9, .35) 40%, transparent 70%), linear-gradient(0deg, rgba(9, 9, 9, .45), transparent 22%); }
  .ab-owner { grid-template-columns: 1fr 1fr; }
  .ab-values__head { grid-template-columns: 1fr; }
  .ab-values__lead { max-width: 560px; }
  .ab-values__grid { grid-template-columns: 1fr; }
  .ab-value { min-height: 0; align-items: center; }
  .ab-space__media { width: 80%; }
  .ab-space__media img { -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, .3) 20%, rgba(0, 0, 0, .75) 45%, #000 60%); mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, .3) 20%, rgba(0, 0, 0, .75) 45%, #000 60%); }
  .ab-quote__mark { left: 0; top: -6px; }
  .ab-quote__inner { padding-inline: 50px; }
}

/* Phone: up to 767px ------------------------------------------------------------ */
@media (max-width: 767px) {
  .ab-hero { display: block; min-height: 0; }
  .ab-hero__media { position: relative; top: 0; width: 100%; height: clamp(240px, 66vw, 340px); }
  .ab-hero__media img { object-position: 45% 25%; -webkit-mask-image: none; mask-image: none; }
  .ab-hero__media::after { background: linear-gradient(0deg, #090909 0%, rgba(9, 9, 9, .55) 28%, transparent 60%); }
  .ab-hero__content { margin-top: -56px; padding: 0 18px 32px; }
  .ab-hero__title { font-size: clamp(42px, 12.5vw, 60px); }
  .ab-hero__tagline { font-size: 12px; letter-spacing: .24em; }
  .ab-hero__actions .btn { flex: 1 1 200px; height: 48px; font-size: 15px; }

  .ab-owner { grid-template-columns: 1fr; }
  .ab-owner__media { aspect-ratio: 4 / 3; }
  .ab-owner__media::after { inset: auto 0 0 0; width: auto; height: 30%; background: linear-gradient(180deg, transparent, #0a0a0a); }
  .ab-owner__copy { padding: 26px 18px 34px; }

  .ab-values { padding: 34px 0; }
  .ab-value { padding: 18px; }

  .ab-space { display: block; min-height: 0; }
  .ab-space__media { position: relative; width: 100%; aspect-ratio: 16 / 10; }
  .ab-space__media img { object-position: 60% 55%; -webkit-mask-image: linear-gradient(0deg, transparent 0%, #000 30%); mask-image: linear-gradient(0deg, transparent 0%, #000 30%); }
  .ab-space__copy { margin-top: -30px; padding-top: 0; padding-bottom: 34px; }

  .ab-quote__inner { padding: 34px 26px; }
  .ab-quote__mark { left: 2px; top: 8px; font-size: 64px; }
}