/* ============================================================
   LANDMARK REAL ESTATE — DESIGN TOKENS
   Shared design system loaded FIRST on every page.
   v1 · 2026-02-22
   ============================================================ */

@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("https://fonts.gstatic.com/s/spacegrotesk/v22/V8mDoQDjQSkFtoMM3T6r8E7mPbF4Cw.woff2") format("woff2");
  unicode-range: U+0024, U+0025, U+002B-U+002F, U+0030-U+0039, U+003A, U+00A3, U+20AC;
}

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("https://fonts.gstatic.com/s/spacegrotesk/v22/V8mDoQDjQSkFtoMM3T6r8E7mPbF4Cw.woff2") format("woff2");
  unicode-range: U+0024, U+0025, U+002B-U+002F, U+0030-U+0039, U+003A, U+00A3, U+20AC;
}

@font-face {
  font-family: "Cormorant Garamond";
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  src: url("https://fonts.gstatic.com/s/spacegrotesk/v22/V8mDoQDjQSkFtoMM3T6r8E7mPbF4Cw.woff2") format("woff2");
  unicode-range: U+0024, U+0025, U+002B-U+002F, U+0030-U+0039, U+003A, U+00A3, U+20AC;
}

@font-face {
  font-family: "Playfair Display";
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url("https://fonts.gstatic.com/s/spacegrotesk/v22/V8mDoQDjQSkFtoMM3T6r8E7mPbF4Cw.woff2") format("woff2");
  unicode-range: U+0024, U+0025, U+002B-U+002F, U+0030-U+0039, U+003A, U+00A3, U+20AC;
}

@font-face {
  font-family: "Outfit";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("https://fonts.gstatic.com/s/spacegrotesk/v22/V8mDoQDjQSkFtoMM3T6r8E7mPbF4Cw.woff2") format("woff2");
  unicode-range: U+0024, U+0025, U+002B-U+002F, U+0030-U+0039, U+003A, U+00A3, U+20AC;
}

:root {

  /* ── Colour Palette — White + Navy + Gold ──────────────── */
  --color-white:      #ffffff;
  --color-gold:       #C9A84C;   /* warm gold — accent only    */
  --color-gold-light: #E8D48A;   /* lighter gold for dark bg   */

  --color-navy-980:   #0D2238;   /* deepest navy               */
  --color-navy-940:   #12304D;   /* main body text             */
  --color-navy-900:   #1B436B;   /* headings / primary         */
  --color-navy-860:   #2A5B8E;   /* interactive navy           */
  --color-navy-820:   #3B76B4;   /* lighter interactive        */
  --color-ink:        #12304D;   /* alias for navy-940         */

  --color-line:       rgba(10, 30, 60, 0.10);   /* subtle navy border    */
  --color-line-strong: rgba(10, 30, 60, 0.18);  /* heavier navy border   */
  --color-tint:       #F5F7FA;   /* barely-there blue-white    */
  --color-surface:    #FFFFFF;   /* card / surface bg          */
  --color-panel:      #F7F9FC;   /* panel bg                   */

  /* card hover */
  --color-card-hover: rgba(201, 168, 76, 0.18);

  /* button — navy primary */
  --color-btn-from:   #1B436B;
  --color-btn-to:     #12365A;
  --color-btn-border: #184061;

  /* success / error */
  --color-success:    #4caf50;
  --color-success-bg: rgba(28, 111, 53, 0.12);
  --color-success-border: rgba(28, 111, 53, 0.28);
  --color-error:      #e53935;
  --color-error-bg:   rgba(229, 57, 53, 0.08);
  --color-error-border: rgba(229, 57, 53, 0.24);

  /* ── Shadow Scale — navy-tinted ────────────────────────── */
  --shadow-sm:         0 2px 8px rgba(13, 34, 56, 0.06);
  --shadow-md:         0 8px 24px rgba(13, 34, 56, 0.09);
  --shadow-lg:         0 20px 48px rgba(13, 34, 56, 0.12);
  --shadow-elevated:   0 32px 72px rgba(13, 34, 56, 0.16);

  --shadow-btn-soft:   0 4px 14px rgba(13, 34, 56, 0.16);
  --shadow-btn-strong: 0 8px 22px rgba(13, 34, 56, 0.22);
  --shadow-btn-hover:  0 14px 30px rgba(13, 34, 56, 0.28);

  /* ── Spacing Scale ─────────────────────────────────────── */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-7:  32px;
  --space-8:  40px;
  --space-9:  48px;

  /* ── Typography Scale (larger for editorial impact) ─────── */
  --text-xs:   0.64rem;                           /* labels, badges        */
  --text-sm:   0.74rem;                           /* buttons, small UI     */
  --text-base: 0.9rem;                            /* body secondary        */
  --text-md:   1rem;                              /* body primary          */
  --text-lg:   1.1rem;                            /* large body / lead     */
  --text-xl:   clamp(1.35rem, 2vw,   1.65rem);   /* card titles           */
  --text-2xl:  clamp(2.2rem,  3.2vw, 3rem);      /* section headings      */
  --text-3xl:  clamp(2.8rem,  5vw,   4.4rem);    /* page heroes           */

  --font-hero:    "Cormorant Garamond", "Playfair Display", Georgia, serif;
  --font-display: "Cormorant Garamond", "Playfair Display", Georgia, serif;
  --font-body:    "Manrope", "Inter", system-ui, sans-serif;
  --font-ui:      "Manrope", "Inter", system-ui, sans-serif;

  /* ── Border Radius ─────────────────────────────────────── */
  --radius-sm:   6px;
  --radius-md:   12px;
  --radius-lg:   16px;
  --radius-pill:  999px;

  /* ── Easing & Duration ─────────────────────────────────── */
  --ease-out-expo: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-standard: ease;

  --duration-fast:   0.22s;
  --duration-normal: 0.34s;
  --duration-slow:   0.52s;

  /* ── Focus Ring ────────────────────────────────────────── */
  --focus-ring:         0 0 0 3px rgba(30, 70, 138, 0.22);
  --focus-ring-on-dark: 0 0 0 3px rgba(201, 168, 76, 0.32);

  /* ── Card Accent Bar — gold ─────────────────────────────── */
  --accent-bar-height: 3px;
  --accent-bar: linear-gradient(90deg, #C9A84C, rgba(201, 168, 76, 0.0));

  /* ── Layout ────────────────────────────────────────────── */
  --max-width: 1480px;
  --site-gutter: clamp(20px, 2.2vw, 40px);
}

@media (min-width: 1680px) {
  :root {
    --max-width: 1560px;
  }
}

html {
  font-variant-numeric: lining-nums tabular-nums;
}


/* =============================================================
   SHARED ANIMATIONS
   ============================================================= */

@keyframes img-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

@keyframes toastSlideIn {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes toastSlideOut {
  from { opacity: 1; transform: translateY(0); }
  to   { opacity: 0; transform: translateY(12px); }
}

@keyframes successFadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes checkDraw {
  to { stroke-dashoffset: 0; }
}

@keyframes landmark-spin {
  to { transform: rotate(360deg); }
}


/* =============================================================
   IMAGE BLUR-UP (shared across all pages)
   ============================================================= */

.blur-up {
  background:
    linear-gradient(110deg, #d8e5f9 30%, #e8f1ff 50%, #d8e5f9 70%);
  background-size: 200% 100%;
  animation: img-shimmer 1.4s ease infinite;
}

.blur-up img {
  opacity: 0;
  transition: opacity 0.4s var(--ease-standard);
}

.blur-up img.is-loaded {
  opacity: 1;
}

.blur-up.img-ready {
  animation: none;
  background: transparent;
}


/* =============================================================
   FOCUS RING (universal)
   ============================================================= */

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}


/* =============================================================
   EMPTY STATE (universal)
   ============================================================= */

.empty-state {
  margin-top: var(--space-5);
  border: 1px dashed var(--color-line);
  border-radius: var(--radius-md);
  background: var(--color-tint);
  color: var(--color-navy-860);
  text-align: center;
  padding: var(--space-5);
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: 700;
  line-height: 1.6;
}


/* =============================================================
   TOAST NOTIFICATIONS (error / success)
   ============================================================= */

.landmark-toast {
  position: fixed;
  bottom: var(--space-6);
  right: var(--space-6);
  z-index: 9000;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-5);
  border-radius: var(--radius-md);
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: 700;
  line-height: 1.5;
  max-width: 420px;
  animation: toastSlideIn 0.35s var(--ease-out-expo);
  box-shadow: var(--shadow-lg);
  pointer-events: auto;
}

.landmark-toast.is-leaving {
  animation: toastSlideOut 0.3s var(--ease-standard) forwards;
}

.landmark-toast--error {
  background: #fff5f5;
  border: 1px solid var(--color-error-border);
  color: #b71c1c;
}

.landmark-toast--error::before {
  content: "⚠";
  font-size: 1.1rem;
  flex-shrink: 0;
}

.landmark-toast--success {
  background: #f0faf2;
  border: 1px solid var(--color-success-border);
  color: #1b5e20;
}

.landmark-toast--success::before {
  content: "✓";
  font-size: 1.1rem;
  font-weight: 900;
  flex-shrink: 0;
}

.landmark-toast-close {
  margin-left: auto;
  background: none;
  border: none;
  font-size: 1rem;
  cursor: pointer;
  opacity: 0.5;
  padding: var(--space-1);
  line-height: 1;
  color: inherit;
}

.landmark-toast-close:hover {
  opacity: 1;
}


/* =============================================================
   FORM STATUS (shared success / error)
   ============================================================= */

.form-status.is-error {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-sm);
  background: var(--color-error-bg);
  border: 1px solid var(--color-error-border);
  color: #b71c1c;
  font-weight: 700;
  font-size: var(--text-base);
  animation: successFadeIn 0.4s ease;
}

.form-honeypot {
  position: absolute !important;
  left: -9999px !important;
  width: 1px !important;
  height: 1px !important;
  opacity: 0 !important;
  pointer-events: none !important;
  overflow: hidden !important;
}

.form-field-error {
  margin-top: 4px;
  display: block;
  color: #ffd5d5;
  font-family: var(--font-body);
  font-size: 0.67rem;
  line-height: 1.35;
  font-weight: 700;
}

.form-legal-consent + .form-field-error {
  margin-top: 1px;
}

.contact-form-lux input.is-invalid,
.contact-form-lux textarea.is-invalid,
.viewing-form input.is-invalid,
.viewing-form textarea.is-invalid {
  border-color: rgba(235, 112, 112, 0.78) !important;
  box-shadow: 0 0 0 2px rgba(235, 112, 112, 0.2);
}

.form-turnstile {
  grid-column: 1 / -1;
  min-height: 0;
  display: flex;
  align-items: center;
}

.form-turnstile .cf-turnstile {
  max-width: 100%;
}

.form-submit-btn.is-submitting,
.property-btn.is-submitting {
  opacity: 0.72;
  cursor: progress;
  pointer-events: none;
}


/* =============================================================
   LEGAL LINKS + COOKIE CONSENT (shared)
   ============================================================= */

.footer-legal-links {
  margin-top: 9px;
  display: flex;
  flex-wrap: wrap;
  gap: 4px 14px;
}

.footer-legal-links a {
  font-family: var(--font-body);
  font-size: 0.72rem;
  letter-spacing: 0.01em;
  color: var(--color-navy-700);
  text-decoration: underline;
  text-decoration-color: rgba(33, 89, 172, 0.36);
  text-underline-offset: 2px;
  border: 0;
  background: transparent;
  padding: 0;
  font-weight: 600;
  line-height: 1.45;
  cursor: pointer;
  transition: color var(--duration-fast), text-decoration-color var(--duration-fast);
}

.footer-legal-links a:hover {
  color: var(--color-primary-700);
  text-decoration-color: rgba(23, 77, 162, 0.78);
}

.footer-cookie-btn {
  font-family: var(--font-ui);
  font-size: 0.64rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 800;
  line-height: 1.2;
  color: #0f3f83;
  border: 1px solid rgba(43, 98, 182, 0.38);
  border-radius: 999px;
  background: linear-gradient(150deg, rgba(229, 240, 255, 0.95), rgba(245, 250, 255, 0.94));
  box-shadow: 0 8px 16px rgba(14, 46, 99, 0.12);
  padding: 7px 12px;
  cursor: pointer;
  transition: transform var(--duration-fast), box-shadow var(--duration-fast), border-color var(--duration-fast), color var(--duration-fast);
}

.footer-cookie-btn:hover {
  color: #0b3774;
  border-color: rgba(36, 90, 176, 0.56);
  box-shadow: 0 11px 20px rgba(13, 42, 89, 0.18);
  transform: translateY(-1px);
}

.footer-cookie-btn:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

@media (max-width: 760px) {
  .footer-cookie-btn {
    padding: 8px 12px;
    min-height: 36px;
  }
}

.form-legal-consent {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 2px 0 4px;
  font-family: var(--font-body);
  font-size: 0.72rem;
  line-height: 1.5;
  color: var(--color-navy-760);
}

.form-legal-consent input[type="checkbox"] {
  margin-top: 2px;
  width: 16px;
  height: 16px;
  accent-color: var(--color-primary-640);
  flex-shrink: 0;
}

.form-legal-consent > span {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 0 6px;
}

.form-legal-consent a {
  color: var(--color-primary-640);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.form-legal-consent a:hover {
  color: var(--color-primary-700);
}

.cookie-banner {
  position: fixed;
  left: 50%;
  bottom: 14px;
  z-index: 9999;
  width: min(1080px, calc(100vw - 24px));
  opacity: 0;
  transform: translate(-50%, 8px);
  pointer-events: none;
  transition: opacity var(--duration-fast), transform var(--duration-fast);
}

.cookie-banner.is-visible {
  opacity: 1;
  transform: translate(-50%, 0);
  pointer-events: auto;
}

.cookie-banner__card {
  border: 1px solid rgba(156, 185, 229, 0.5);
  border-radius: 18px;
  background: linear-gradient(176deg, rgba(255, 255, 255, 0.96), rgba(242, 248, 255, 0.95));
  box-shadow: 0 18px 42px rgba(4, 17, 42, 0.2);
  padding: 14px 16px;
  display: grid;
  gap: 6px 16px;
  grid-template-columns: minmax(0, 1.7fr) auto;
  grid-template-areas:
    "eyebrow actions"
    "title actions"
    "body actions"
    "panel panel";
  align-items: center;
}

.cookie-banner__card::before {
  content: '';
  position: absolute;
  inset: 0 12px auto 12px;
  height: 1px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(24, 75, 147, 0.48), rgba(63, 118, 196, 0.24), rgba(24, 75, 147, 0));
  pointer-events: none;
}

.cookie-banner__card {
  position: relative;
}

.cookie-banner__eyebrow {
  grid-area: eyebrow;
  margin: 0;
  font-family: var(--font-ui);
  font-size: 0.54rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--color-primary-640);
  font-weight: 800;
}

.cookie-banner__title {
  grid-area: title;
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.04rem, 1.7vw, 1.42rem);
  line-height: 1.08;
  color: var(--color-navy-920);
}

.cookie-banner__body {
  grid-area: body;
  margin: 0;
  font-family: var(--font-body);
  font-size: 0.72rem;
  line-height: 1.48;
  color: var(--color-navy-760);
  max-width: 76ch;
}

.cookie-banner__actions,
.cookie-panel__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.cookie-banner__actions {
  grid-area: actions;
  justify-content: flex-end;
  align-self: center;
}

.cookie-banner__actions .cookie-btn {
  font-size: 0.78rem;
  padding: 10px 17px;
  min-height: 44px;
}

.cookie-btn {
  border-radius: var(--radius-pill);
  border: 1px solid rgba(47, 103, 188, 0.26);
  background: rgba(255, 255, 255, 0.94);
  color: var(--color-navy-720);
  font-family: var(--font-ui);
  font-size: 0.56rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: 700;
  padding: 7px 12px;
  cursor: pointer;
  transition: border-color var(--duration-fast), color var(--duration-fast), background var(--duration-fast);
}

.cookie-btn:hover {
  border-color: rgba(23, 77, 162, 0.45);
  color: var(--color-primary-700);
}

.cookie-btn--primary {
  background: linear-gradient(135deg, #2662bb, #164d9f);
  border-color: transparent;
  color: #f7fbff;
  box-shadow: 0 8px 14px rgba(24, 75, 147, 0.18);
}

.cookie-btn--primary:hover {
  background: linear-gradient(135deg, #2156a8, #143f84);
  color: #f7fbff;
}

.cookie-panel {
  grid-area: panel;
  border: 1px solid rgba(156, 185, 229, 0.52);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.72);
  padding: 10px;
  gap: 10px;
  grid-template-columns: repeat(3, minmax(0, 1fr)) auto;
  align-items: stretch;
}

.cookie-panel[hidden] {
  display: none !important;
}

.cookie-panel:not([hidden]) {
  display: grid;
}

.cookie-option {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-family: var(--font-body);
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid rgba(179, 205, 242, 0.58);
  border-radius: 10px;
  padding: 10px;
}

.cookie-option input[type="checkbox"] {
  margin-top: 3px;
  width: 16px;
  height: 16px;
  accent-color: var(--color-primary-640);
  flex-shrink: 0;
}

.cookie-option strong {
  display: block;
  color: var(--color-navy-820);
  font-size: 0.7rem;
}

.cookie-option small {
  display: block;
  margin-top: 2px;
  color: var(--color-navy-640);
  font-size: 0.64rem;
  line-height: 1.4;
}

.cookie-option--disabled {
  opacity: 0.86;
  background: rgba(240, 246, 255, 0.9);
}

.cookie-panel__actions {
  justify-content: flex-end;
  align-items: flex-end;
}

.cookie-panel__actions .cookie-btn {
  min-width: 150px;
}

@media (max-width: 760px) {
  .cookie-banner {
    left: 50%;
    right: auto;
    bottom: 10px;
    width: min(700px, calc(100vw - 20px));
  }

  .cookie-banner__card {
    border-radius: 13px;
    padding: 12px;
    gap: 8px;
    grid-template-columns: 1fr;
    grid-template-areas:
      "eyebrow"
      "title"
      "body"
      "actions"
      "panel";
  }

  .cookie-banner__actions,
  .cookie-panel__actions {
    gap: 6px;
  }

  .cookie-banner__actions {
    justify-content: flex-start;
  }

  .cookie-banner__actions .cookie-btn {
    font-size: 0.72rem;
    padding: 9px 14px;
    min-height: 40px;
  }

  .cookie-panel {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .cookie-panel__actions {
    justify-content: flex-start;
  }

  .cookie-panel__actions .cookie-btn {
    min-width: 0;
  }

  .footer-legal-links {
    gap: 6px 12px;
  }
}

@media (max-width: 980px) and (min-width: 761px) {
  .cookie-banner {
    width: min(900px, calc(100vw - 22px));
  }

  .cookie-banner__card {
    grid-template-columns: 1fr;
    grid-template-areas:
      "eyebrow"
      "title"
      "body"
      "actions"
      "panel";
  }

  .cookie-banner__actions {
    justify-content: flex-start;
  }

  .cookie-panel {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}


/* =============================================================
   WHATSAPP CONCIERGE (shared)
   ============================================================= */

.wa-concierge {
  position: fixed;
  right: calc(env(safe-area-inset-right, 0px) + 18px);
  bottom: calc(env(safe-area-inset-bottom, 0px) + 18px);
  z-index: 9600;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  border: 1px solid rgba(168, 198, 240, 0.5);
  border-radius: var(--radius-pill);
  background: linear-gradient(140deg, rgba(8, 31, 66, 0.95), rgba(22, 68, 134, 0.9));
  color: #f6faff;
  font-family: var(--font-ui);
  font-size: 0.79rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.01em;
  white-space: nowrap;
  padding: 10px 18px 10px 12px;
  box-shadow: 0 16px 34px rgba(5, 17, 42, 0.35);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  cursor: pointer;
  opacity: 0;
  transform: translate3d(0, 10px, 0);
  pointer-events: none;
  transition:
    opacity var(--duration-fast),
    transform var(--duration-fast),
    box-shadow var(--duration-fast),
    border-color var(--duration-fast);
}

.wa-concierge.is-visible {
  opacity: 1;
  transform: translate3d(0, 0, 0);
  pointer-events: auto;
}

.wa-concierge:hover {
  transform: translate3d(0, -2px, 0);
  border-color: rgba(196, 220, 255, 0.7);
  box-shadow: 0 22px 40px rgba(6, 22, 52, 0.4);
}

.wa-concierge:focus-visible {
  box-shadow: var(--focus-ring-on-dark), 0 22px 40px rgba(6, 22, 52, 0.4);
}

.wa-concierge__icon {
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  border-radius: var(--radius-pill);
  border: 1px solid rgba(224, 236, 255, 0.28);
  background: rgba(255, 255, 255, 0.12);
}

.wa-concierge__icon svg {
  width: 17px;
  height: 17px;
  stroke: currentColor;
  stroke-width: 1.45;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.wa-concierge__label {
  display: inline-block;
}

@media (max-width: 760px) {
  .wa-concierge {
    right: calc(env(safe-area-inset-right, 0px) + 12px);
    bottom: calc(env(safe-area-inset-bottom, 0px) + 12px);
    font-size: 0.74rem;
    padding: 9px 15px 9px 11px;
    gap: 8px;
  }

  .wa-concierge__icon {
    width: 28px;
    height: 28px;
  }
}


/* =============================================================
   REDUCED MOTION
   ============================================================= */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  .blur-up {
    animation: none;
    background: #e8f1ff;
  }

  .blur-up img {
    opacity: 1;
    transition: none;
  }
}