/*
  BlessKuts – Contact page. Loaded after styles.css, which supplies the nav, buttons, footer and colour tokens.
  Sizes follow the 846px-wide reference (design/contact-reference.webp), scaled up with clamp() like the other pages.
*/

.page-contact {
  --ct-line: rgba(237, 28, 36, .5);
  --ct-border: rgba(255, 255, 255, .11);
  --ct-card: rgba(13, 13, 13, .9);
  --ct-head: var(--brand);
}
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.footer__links a[aria-current="page"] { color: #fff; font-weight: 700; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 5px; }

.ct-wrap { width: 100%; max-width: 1600px; margin-inline: auto; }
.ct-eyebrow { color: var(--red-bright); font-size: clamp(11px, 1.1vw, 15px); font-weight: 800; letter-spacing: .28em; text-transform: uppercase; }
.ct-eyebrow--sm { font-size: clamp(10px, .9vw, 13px); }
.ct-title { margin-top: 4px; font: 800 clamp(28px, 3.5vw, 52px) / 1.05 var(--ct-head); letter-spacing: -.005em; color: #fff; }
.ct-title span { color: var(--red); }
.ct-lead { margin-top: clamp(10px, 1.2vw, 16px); color: #d6d6d6; font-size: clamp(14px, 1.3vw, 18px); line-height: 1.5; }

/* Outlined button: dark fill, thin red outline (hero, location) */
.ct-btn-outline {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  border: 1px solid var(--red); border-radius: 4px; background: rgba(0, 0, 0, .45); color: #fff; font-weight: 600; white-space: nowrap;
  transition: background-color .25s var(--ease), border-color .25s var(--ease), transform .25s var(--ease);
}
.ct-btn-outline:hover { background: rgba(237, 28, 36, .16); border-color: var(--red-bright); transform: translateY(-1px); }
.ct-btn-outline svg { width: 17px; height: 17px; color: var(--red-bright); }

/* Hero ------------------------------------------------------------------- */
.ct-hero {
  position: relative; overflow: hidden; display: flex; align-items: center;
  min-height: calc(var(--nav-h) + clamp(340px, 41.5vw, 640px)); padding-top: var(--nav-h);
  background: #080808; border-bottom: 1px solid var(--ct-line);
}
.ct-hero__media { position: absolute; top: 0; right: 0; bottom: 0; width: 62%; }
.ct-hero__media img {
  width: 100%; height: 100%; object-fit: cover; object-position: 52% 55%;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, .55) 12%, #000 30%); mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, .55) 12%, #000 30%);
}
.ct-hero__media::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(90deg, rgba(8, 8, 8, .7) 0%, rgba(8, 8, 8, .3) 22%, transparent 45%),
    radial-gradient(ellipse 40% 70% at 0% 50%, rgba(150, 10, 18, .35), transparent 70%),
    linear-gradient(0deg, rgba(8, 8, 8, .5), transparent 22%);
}
.ct-hero::before { /* red atmosphere on the far left, behind the copy */
  content: ''; position: absolute; inset: 0 auto 0 0; width: 40%; pointer-events: none;
  background: radial-gradient(ellipse 60% 80% at 0% 30%, rgba(160, 8, 18, .45), transparent 70%);
}
.ct-hero__content { position: relative; z-index: 1; padding-block: clamp(30px, 3.6vw, 56px); }
.ct-hero__title { margin-top: clamp(10px, 1.2vw, 18px); font: 800 clamp(50px, 7.2vw, 108px) / .98 var(--ct-head); letter-spacing: -.012em; color: #fff; }
.ct-hero__title span { color: var(--red); }
.ct-hero__text { max-width: 500px; margin-top: clamp(14px, 1.6vw, 24px); color: #ececec; font-size: clamp(14px, 1.45vw, 20px); line-height: 1.5; }
.ct-hero__actions { display: flex; flex-wrap: wrap; gap: clamp(12px, 1.6vw, 22px); margin-top: clamp(20px, 2.6vw, 38px); }
.ct-hero__actions .btn { height: clamp(42px, 4.2vw, 60px); padding: 0 clamp(18px, 2.2vw, 32px); font-size: clamp(13px, 1.25vw, 17px); border-radius: 4px; }
.ct-hero__actions .btn svg, .ct-hero__actions .btn [data-lucide] { width: 16px; height: 16px; }

/* Form + hours --------------------------------------------------------------- */
.ct-main {
  position: relative; padding: clamp(16px, 2.1vw, 30px) 0 clamp(16px, 2.2vw, 30px);
  background:
    radial-gradient(ellipse 22% 60% at 0% 40%, rgba(140, 8, 16, .4), transparent 75%),
    radial-gradient(ellipse 18% 60% at 100% 60%, rgba(120, 8, 14, .35), transparent 75%),
    linear-gradient(rgba(8, 8, 8, .9), rgba(8, 8, 8, .9)), url('../assets/img/contact/texture.webp') center / cover no-repeat, #090909;
}
.ct-main__grid { display: grid; grid-template-columns: minmax(0, 1.33fr) minmax(0, 1fr); gap: clamp(12px, 1.9vw, 26px); align-items: stretch; }
.ct-card { position: relative; overflow: hidden; padding: clamp(20px, 2.7vw, 40px); border: 1px solid var(--ct-border); border-radius: 6px; background: var(--ct-card); box-shadow: 0 16px 40px rgba(0, 0, 0, .35); }
.ct-form-card .ct-lead { max-width: 380px; }

.ct-form { display: grid; gap: clamp(10px, 1.2vw, 16px); margin-top: clamp(18px, 2.4vw, 34px); }
.ct-form__row { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(10px, 1.2vw, 16px); }
.ct-field { position: relative; }
.ct-field > svg, .ct-field > [data-lucide] { position: absolute; left: clamp(14px, 1.6vw, 20px); top: calc(clamp(46px, 4.6vw, 64px) / 2); width: 17px; height: 17px; color: #cfcfcf; transform: translateY(-50%); pointer-events: none; transition: color .2s; }
.ct-field input, .ct-field textarea {
  display: block; width: 100%; height: clamp(46px, 4.6vw, 64px); padding: 0 14px 0 clamp(42px, 4.3vw, 56px);
  border: 1px solid rgba(255, 255, 255, .16); border-radius: 4px; background: rgba(28, 28, 28, .85); color: #fff;
  font: 400 clamp(14px, 1.2vw, 16px) / 1.4 var(--body); transition: border-color .2s var(--ease), box-shadow .2s var(--ease), background-color .2s;
}
.ct-field textarea { height: clamp(130px, 12.5vw, 190px); padding-top: clamp(13px, 1.4vw, 20px); resize: vertical; }
.ct-field input::placeholder, .ct-field textarea::placeholder { color: #b7b7b7; }
.ct-field input:focus, .ct-field textarea:focus { outline: none; border-color: var(--red); background: rgba(32, 22, 23, .9); box-shadow: 0 0 0 3px rgba(237, 28, 36, .18); }
.ct-field:focus-within > svg { color: var(--red-bright); }
.ct-field.is-invalid input, .ct-field.is-invalid textarea { border-color: #ff5a62; }
.ct-field__error { margin-top: 6px; color: #ff9aa0; font-size: 13px; }
.ct-field__error:empty { display: none; }
.ct-trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.ct-form__submit { width: 100%; height: clamp(46px, 4.3vw, 60px); gap: 10px; font-size: clamp(14px, 1.25vw, 17px); border-radius: 4px; }
.ct-form__submit svg { width: 17px; height: 17px; }
.ct-form__submit:disabled { opacity: .7; cursor: progress; transform: none; }
.ct-form__status { padding: 12px 14px; border: 1px solid var(--ct-border); border-radius: 4px; font-size: 14px; line-height: 1.5; color: #e6e6e6; background: rgba(255, 255, 255, .04); }
.ct-form__status a { color: #fff; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.ct-form__status.is-success { border-color: rgba(70, 190, 110, .6); background: rgba(40, 120, 70, .14); }
.ct-form__status.is-error { border-color: rgba(255, 90, 98, .7); background: rgba(140, 10, 20, .2); }
.ct-form__status.is-info { border-color: var(--ct-line); background: rgba(140, 10, 20, .14); }

.ct-hours { background: linear-gradient(90deg, rgba(13, 13, 13, .96) 30%, rgba(13, 13, 13, .7)), url('../assets/img/contact/clock.webp') right top / 85% auto no-repeat, #0d0d0d; }
.ct-hours__head { display: flex; align-items: flex-start; gap: clamp(14px, 2vw, 26px); }
.ct-hours__icon { width: clamp(26px, 3vw, 40px) !important; height: clamp(26px, 3vw, 40px) !important; margin-top: -2px; color: var(--red-bright); stroke-width: 2; }
.ct-hours__list { margin: clamp(16px, 2.2vw, 30px) 0 0; }
.ct-hours__list > div { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: clamp(40px, 4vw, 56px); border-bottom: 1px solid rgba(255, 255, 255, .09); font-size: clamp(14px, 1.3vw, 18px); }
.ct-hours__list dt { color: #e4e4e4; }
.ct-hours__list dd { margin: 0; color: #f2f2f2; font-variant-numeric: tabular-nums; }
.ct-hours__list dd.is-closed { color: #bdbdbd; }
.ct-hours__list .is-today dt, .ct-hours__list .is-today dd { color: #fff; font-weight: 700; }
.ct-hours__today { margin-left: 6px; padding: 2px 6px; border-radius: 3px; background: var(--red); color: #fff; font-size: 10px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; vertical-align: 2px; }
.ct-callout {
  display: flex; align-items: center; gap: clamp(14px, 1.8vw, 24px); margin-top: clamp(18px, 2.6vw, 34px); padding: clamp(14px, 1.6vw, 22px) clamp(14px, 1.8vw, 24px);
  border: 1px solid rgba(255, 255, 255, .14); border-radius: 5px; background: rgba(8, 8, 8, .7);
  transition: border-color .25s var(--ease), background-color .25s var(--ease), transform .25s var(--ease);
}
.ct-callout:hover { border-color: rgba(237, 28, 36, .7); background: rgba(40, 8, 10, .7); transform: translateY(-2px); }
.ct-callout__icon { width: clamp(26px, 3vw, 38px) !important; height: clamp(26px, 3vw, 38px) !important; color: var(--red-bright); stroke-width: 1.8; }
.ct-callout > span { flex: 1; }
.ct-callout strong { display: block; color: #fff; font-size: clamp(14px, 1.3vw, 18px); }
.ct-callout strong + span { display: block; margin-top: 3px; color: #c9c9c9; font-size: clamp(12.5px, 1.1vw, 15px); line-height: 1.4; }
.ct-callout__arrow { width: 18px; height: 18px; color: #fff; transition: transform .25s var(--ease); }
.ct-callout:hover .ct-callout__arrow { transform: translateX(3px); }

/* Visit the shop --------------------------------------------------------------- */
.ct-visit-wrap { padding: 0 0 clamp(16px, 2.2vw, 30px); background: #090909; }
.ct-visit {
  position: relative; overflow: hidden; display: flex; align-items: center; min-height: clamp(320px, 37vw, 560px);
  border: 1px solid var(--ct-border); border-radius: 6px; background: #0a0a0a;
}
.ct-visit__map { position: absolute; inset: 0 38% 0 0; -webkit-mask-image: linear-gradient(90deg, #000 72%, transparent 100%); mask-image: linear-gradient(90deg, #000 72%, transparent 100%); } /* fades out just as the storefront photo begins */
.ct-visit__map img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 45%; opacity: .9; }
.ct-visit__map::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(10, 10, 10, .92) 0%, rgba(10, 10, 10, .65) 30%, rgba(10, 10, 10, .1) 58%, rgba(10, 10, 10, .2) 100%); }
.ct-visit__photo { position: absolute; top: 0; right: 0; bottom: 0; width: 40%; }
.ct-visit__photo { --ct-photo-fade: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, .55) 8%, #000 18%); }
.ct-visit__photo img {
  width: 100%; height: 100%; object-fit: cover; object-position: 35% 45%; transition: transform .6s var(--ease);
  -webkit-mask-image: var(--ct-photo-fade); mask-image: var(--ct-photo-fade);
}
/* The storefront is bright (white walls): darken its left side to black so it melts into the dark map.
   Same mask as the photo, so the shade only sits on the photo, never on the map beside it. */
.ct-visit__photo::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(90deg, #0a0a0a 0%, rgba(10, 10, 10, .8) 10%, rgba(10, 10, 10, .35) 22%, transparent 36%),
    linear-gradient(0deg, rgba(10, 10, 10, .45), transparent 22%), linear-gradient(180deg, rgba(10, 10, 10, .3), transparent 18%);
  -webkit-mask-image: var(--ct-photo-fade); mask-image: var(--ct-photo-fade);
}
.ct-visit:hover .ct-visit__photo img { transform: scale(1.02); }
.ct-visit__copy { position: relative; z-index: 1; max-width: min(46%, 520px); padding: clamp(24px, 3.4vw, 50px) clamp(20px, 3.2vw, 46px); }
.ct-visit__label { display: flex; align-items: center; gap: clamp(12px, 1.8vw, 24px); }
.ct-visit__pin { width: clamp(26px, 3.3vw, 46px) !important; height: clamp(26px, 3.3vw, 46px) !important; color: var(--red-bright); stroke-width: 2; }
.ct-address { display: flex; gap: 14px; margin-top: clamp(18px, 2.8vw, 40px); color: #e2e2e2; font-size: clamp(14px, 1.3vw, 18px); line-height: 1.5; }
.ct-address > svg { width: 20px; height: 20px; flex: none; margin-top: 3px; color: var(--red-bright); }
.ct-address strong { display: block; color: #fff; font-size: clamp(15px, 1.5vw, 21px); }
.ct-address a { color: #fff; font-weight: 600; }
.ct-address a:hover { color: var(--red-bright); }
.ct-visit__btn { height: clamp(40px, 3.7vw, 54px); margin-top: clamp(16px, 2.2vw, 30px); padding: 0 clamp(16px, 1.9vw, 26px); font-size: clamp(13px, 1.2vw, 16px); }

/* Booking banner -------------------------------------------------------------------- */
.ct-cta { position: relative; overflow: hidden; display: flex; align-items: center; min-height: clamp(240px, 28vw, 430px); background: #120304; border-top: 1px solid var(--ct-line); }
.ct-cta__bg { position: absolute; inset: 0 -3%; }
.ct-cta__bg img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 55%; }
.ct-cta__bg::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(8, 2, 3, .9) 0%, rgba(8, 2, 3, .62) 35%, rgba(8, 2, 3, .25) 65%, rgba(8, 2, 3, .45) 100%), linear-gradient(0deg, rgba(60, 4, 8, .35), transparent 50%); }
.ct-cta__inner { position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 28px; padding-block: clamp(30px, 4vw, 60px); }
.ct-cta__title { font: 800 clamp(32px, 4.1vw, 62px) / 1 var(--ct-head); color: #fff; letter-spacing: -.005em; }
.ct-cta__title span { color: var(--red); }
.ct-cta__sub { margin-top: 4px; color: #fff; font: 300 clamp(24px, 3.1vw, 46px) / 1.1 var(--body); }
.ct-cta__text { margin-top: clamp(14px, 1.6vw, 22px); color: #e8e8e8; font-size: clamp(14px, 1.45vw, 20px); }
.ct-cta__btn { flex: none; height: clamp(48px, 5.2vw, 70px); padding: 0 clamp(20px, 2.6vw, 38px); gap: 12px; font-size: clamp(14px, 1.3vw, 18px); border-radius: 4px; box-shadow: 0 10px 26px rgba(0, 0, 0, .35); }
.ct-cta__btn svg, .ct-cta__btn [data-lucide] { width: 17px; height: 17px; }
.ct-cta.is-flash .ct-cta__btn { animation: ct-flash 1.1s var(--ease); }
@keyframes ct-flash { 40% { box-shadow: 0 0 0 6px rgba(255, 255, 255, .4); } }

/* Tablet: 768–1023px ----------------------------------------------------------- */
@media (max-width: 1023px) {
  .ct-hero__media { width: 80%; }
  .ct-main__grid { grid-template-columns: 1fr; }
  .ct-visit__copy { max-width: 58%; }
  .ct-visit__photo { width: 48%; }
  .ct-visit__map { right: 46%; }
  .ct-cta__inner { flex-wrap: wrap; }
}

/* Phone: up to 767px ------------------------------------------------------------ */
@media (max-width: 767px) {
  .ct-hero { display: block; min-height: 0; }
  .ct-hero::before { display: none; }
  .ct-hero__media { position: relative; top: 0; width: 100%; height: clamp(230px, 62vw, 320px); }
  .ct-hero__media img { -webkit-mask-image: none; mask-image: none; }
  .ct-hero__media::after { background: linear-gradient(0deg, #080808 0%, rgba(8, 8, 8, .5) 30%, transparent 60%); }
  .ct-hero__content { margin-top: -50px; padding: 0 18px 32px; }
  .ct-hero__actions .btn { flex: 1 1 200px; height: 48px; font-size: 15px; }

  .ct-form__row { grid-template-columns: 1fr; }
  .ct-card { padding: 22px 18px; }

  .ct-visit { display: block; }
  .ct-visit__map { inset: 0; -webkit-mask-image: none; mask-image: none; }
  .ct-visit__photo { position: relative; width: 100%; aspect-ratio: 1312 / 1199; }
  .ct-visit__photo { --ct-photo-fade: linear-gradient(0deg, transparent 0%, #000 35%); }
  .ct-visit__photo::after { background: linear-gradient(0deg, #0a0a0a 0%, rgba(10, 10, 10, .6) 22%, transparent 45%); }
  .ct-visit__copy { max-width: none; margin-top: -24px; padding: 0 18px 26px; }


  .ct-cta__inner { flex-direction: column; align-items: stretch; padding: 36px 18px; }
  .ct-cta__btn { width: 100%; }
}