/* Asmaani Jodey Midnight Blue : rebrand landing for the retired zaujmatrimony.com
   COLOURS LIVE IN brand.css. Do not put hex codes in this file. */

@font-face{font-family:'Bodoni Moda';src:url('fonts/bodonimoda-600-normal.woff2') format('woff2');font-weight:400 900;font-style:normal;font-display:swap}
@font-face{font-family:'Bodoni Moda';src:url('fonts/bodonimoda-500-italic.woff2') format('woff2');font-weight:400 900;font-style:italic;font-display:swap}
@font-face{font-family:'Manrope';src:url('fonts/manrope-400-normal.woff2') format('woff2');font-weight:200 800;font-style:normal;font-display:swap}

:root{
  --font-display:'Bodoni Moda',Georgia,serif;
  --font-body:'Manrope',system-ui,-apple-system,'Segoe UI',sans-serif;
  --shell:1180px; --gutter:24px;
  --xs:8px; --sm:16px; --md:32px; --lg:72px; --xl:128px;
  --r-sm:4px; --r-md:18px; --r-pill:999px;
  --ease:cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{box-sizing:border-box}
:where(h1,h2,h3,p,figure,blockquote,ul,ol,dl,dd){margin:0;padding:0}
:where(ul,ol){list-style:none}
:where(img,svg){display:block;max-width:100%}
:where(a){color:inherit;text-decoration:none}

/* clip, not hidden: it stops the portrait glow causing a sideways scrollbar
   without turning the page into a scroll container, which would break the
   sticky header. */
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;overflow-x:clip}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body.ajm{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:var(--font-body); font-weight:400; font-size:17px; line-height:1.62;
  -webkit-font-smoothing:antialiased; overflow-x:clip;
}

.ajm-shell{width:100%;max-width:var(--shell);margin-inline:auto;padding-inline:var(--gutter)}

.ajm-skip{position:absolute;left:-9999px;top:0;background:var(--accent);color:var(--on-accent);padding:12px 20px;z-index:99;font-weight:700}
.ajm-skip:focus{left:0}
:focus-visible{outline:2px solid var(--accent-soft);outline-offset:3px}

/* ==========================================================================
   THE MOVING GLOW
   Three soft blobs drifting behind everything, plus a slow parallax lift of
   the whole field as the page scrolls. Transform only, so it stays smooth.
   ========================================================================== */
.ajm-aurora{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden;contain:strict}
.ajm-aurora i{position:absolute;display:block;border-radius:50%}
.ajm-aurora i:nth-child(1){
  width:68vw;height:68vw;top:-24%;left:-14%;opacity:.55;
  background:radial-gradient(circle,color-mix(in oklab,var(--accent) 60%,transparent) 0%,transparent 62%);
}
.ajm-aurora i:nth-child(2){
  width:76vw;height:76vw;bottom:-32%;right:-20%;opacity:.5;
  background:radial-gradient(circle,color-mix(in oklab,var(--deep) 88%,transparent) 0%,transparent 64%);
}
.ajm-aurora i:nth-child(3){
  width:44vw;height:44vw;top:38%;left:44%;opacity:.35;
  background:radial-gradient(circle,color-mix(in oklab,var(--accent) 42%,transparent) 0%,transparent 66%);
}
@media (prefers-reduced-motion:no-preference){
  .ajm-aurora i:nth-child(1){animation:ajmDriftA 30s ease-in-out infinite alternate}
  .ajm-aurora i:nth-child(2){animation:ajmDriftB 38s ease-in-out infinite alternate}
  .ajm-aurora i:nth-child(3){animation:ajmDriftC 24s ease-in-out infinite alternate}
}
@keyframes ajmDriftA{from{transform:translate3d(0,0,0) scale(1)}to{transform:translate3d(14vw,10vh,0) scale(1.18)}}
@keyframes ajmDriftB{from{transform:translate3d(0,0,0) scale(1.1)}to{transform:translate3d(-16vw,-12vh,0) scale(.92)}}
@keyframes ajmDriftC{from{transform:translate3d(0,0,0) scale(.9)}to{transform:translate3d(-12vw,14vh,0) scale(1.25)}}

@supports (animation-timeline:scroll()){
  @media (prefers-reduced-motion:no-preference){
    .ajm-aurora{
      animation-name:ajmAuroraLift; animation-duration:1s; animation-fill-mode:both;
      animation-timing-function:linear; animation-timeline:scroll(root block);
    }
  }
}
@keyframes ajmAuroraLift{from{transform:translate3d(0,4vh,0)}to{transform:translate3d(0,-10vh,0)}}

.ajm-page{position:relative;z-index:1}

/* ---------- type ---------- */
.ajm-display{
  font-family:var(--font-display); font-weight:600; letter-spacing:-.015em;
  line-height:1.02; text-wrap:balance; font-size:clamp(2.6rem,6.6vw,4.6rem);
}
.ajm-display i{font-style:italic;font-weight:500;color:var(--accent-soft);line-height:1.12;display:inline-block;padding-bottom:.06em}
.ajm-h2{font-family:var(--font-display);font-weight:600;line-height:1.08;letter-spacing:-.01em;text-wrap:balance;font-size:clamp(2rem,4.6vw,3.15rem)}
.ajm-kicker{font-size:.78rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--accent-soft);margin:0 0 var(--sm)}
.ajm-lede{font-size:clamp(1.02rem,1.5vw,1.2rem);color:var(--muted);max-width:44ch;text-wrap:pretty;margin-top:var(--md)}
.ajm-p{color:var(--muted);max-width:62ch;text-wrap:pretty}
.ajm-note{font-size:.85rem;color:var(--muted);margin-top:var(--sm)}

/* ---------- buttons ---------- */
.ajm-btn{
  position:relative;display:inline-flex;align-items:center;gap:10px;
  font-family:var(--font-body);font-weight:700;font-size:.95rem;
  padding:14px 28px;border-radius:var(--r-pill);overflow:hidden;white-space:nowrap;
  transition:transform .35s var(--ease);
}
.ajm-btn__brief{display:none}
.ajm-btn--solid{background:var(--accent);color:var(--on-accent)}
.ajm-btn--solid::after{
  content:'';position:absolute;inset:0;border-radius:inherit;
  background:linear-gradient(100deg,transparent 30%,color-mix(in oklab,#FFFFFF 45%,transparent) 50%,transparent 70%);
  transform:translateX(-110%);transition:transform .7s var(--ease);
}
.ajm-btn--solid:hover::after,.ajm-btn--solid:focus-visible::after{transform:translateX(110%)}
.ajm-btn:hover,.ajm-btn:focus-visible{transform:translateY(-2px)}
.ajm-btn svg{width:16px;height:16px;flex:none;transition:transform .35s var(--ease)}
.ajm-btn:hover svg{transform:translateX(4px)}

/* ---------- header ---------- */
.ajm-head{
  position:sticky;top:0;z-index:40;
  background:color-mix(in oklab,var(--bg) 78%,transparent);
  backdrop-filter:saturate(160%) blur(16px);
  -webkit-backdrop-filter:saturate(160%) blur(16px);
  border-bottom:1px solid var(--line);
}
.ajm-head__in{display:flex;align-items:center;justify-content:space-between;gap:var(--md);height:76px}
.ajm-brand{display:flex;align-items:center;gap:14px;min-width:0}
.ajm-brand__star{width:30px;height:30px;color:var(--accent-soft);flex:none}
.ajm-brand__txt{display:flex;flex-direction:column;line-height:1.15;min-width:0}
.ajm-brand__txt b{font-family:var(--font-display);font-weight:600;font-size:1.22rem}
.ajm-brand__txt span{font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.ajm-head .ajm-btn{padding:11px 22px;font-size:.88rem}
.ajm-progress{position:absolute;left:0;bottom:-1px;height:2px;width:100%;transform-origin:0 50%;background:var(--accent);transform:scaleX(0)}
@supports (animation-timeline:scroll()){
  @media (prefers-reduced-motion:no-preference){
    .ajm-progress{animation-name:ajmProgress;animation-duration:1s;animation-fill-mode:both;animation-timing-function:linear;animation-timeline:scroll(root block)}
  }
}
@keyframes ajmProgress{from{transform:scaleX(0)}to{transform:scaleX(1)}}

/* ---------- hero ---------- */
.ajm-hero{position:relative;padding-block:clamp(40px,5vw,80px) clamp(var(--lg),8vw,110px)}
.ajm-hero__in{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center;gap:clamp(var(--md),4vw,var(--lg))}
.ajm-hero__copy{max-width:40rem}
.ajm-actions{display:flex;flex-wrap:wrap;gap:var(--sm);margin-top:var(--md)}

/* the portrait: no frame, floating over the glow */
.ajm-portrait{position:relative;justify-self:center;width:100%;max-width:560px}
.ajm-portrait::before{
  content:'';position:absolute;left:50%;top:52%;translate:-50% -50%;
  width:112%;aspect-ratio:1;border-radius:50%;z-index:0;
  background:radial-gradient(circle,color-mix(in oklab,var(--accent) 38%,transparent) 0%,transparent 64%);
}
.ajm-portrait__lift{position:relative;z-index:1}
/* The source photo is cropped flat at its bottom edge, so fade the last slice
   of it into the ground rather than letting it end on a hard line. */
.ajm-portrait img{
  width:100%;height:auto;position:relative;z-index:1;
  -webkit-mask-image:linear-gradient(to bottom,black 74%,transparent 99%);
  mask-image:linear-gradient(to bottom,black 74%,transparent 99%);
}
@media (prefers-reduced-motion:no-preference){
  .ajm-portrait img{animation:ajmFloat 9s ease-in-out infinite alternate}
}
@keyframes ajmFloat{from{transform:translate3d(0,-10px,0)}to{transform:translate3d(0,10px,0)}}
@supports (animation-timeline:scroll()){
  @media (prefers-reduced-motion:no-preference){
    .ajm-portrait__lift{
      animation-name:ajmPortraitDrift;animation-duration:1s;animation-fill-mode:both;
      animation-timing-function:linear;animation-timeline:scroll(root block);animation-range:0 100vh;
    }
  }
}
@keyframes ajmPortraitDrift{from{transform:translate3d(0,0,0) scale(1)}to{transform:translate3d(0,-56px,0) scale(1.05)}}

/* ---------- band: what changed ---------- */
.ajm-band{background:color-mix(in oklab,var(--surface) 78%,transparent);border-block:1px solid var(--line);padding-block:clamp(var(--lg),8vw,var(--xl))}
.ajm-band__in{display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);gap:clamp(var(--md),5vw,var(--lg))}
.ajm-band__head{align-self:start}
.ajm-band__head .ajm-p{margin-top:var(--md)}
.ajm-facts{border-top:1px solid var(--line)}
.ajm-fact{display:grid;grid-template-columns:minmax(0,7.5rem) minmax(0,1fr);gap:var(--md);padding-block:26px;border-bottom:1px solid var(--line)}
.ajm-fact dt{font-size:.74rem;letter-spacing:.18em;text-transform:uppercase;color:var(--accent-soft);padding-top:.35em}
.ajm-fact dd{color:var(--ink);text-wrap:pretty}

/* ---------- connect ---------- */
.ajm-connect{padding-block:clamp(var(--lg),8vw,var(--xl))}
.ajm-connect__head{display:grid;gap:var(--sm);justify-items:start;margin-bottom:var(--lg)}
.ajm-tel{font-family:var(--font-display);font-weight:600;line-height:1;font-size:clamp(2.3rem,7.4vw,4.6rem);letter-spacing:-.02em;color:var(--ink);transition:color .3s var(--ease)}
.ajm-tel:hover,.ajm-tel:focus-visible{color:var(--accent-soft)}

/* the bento: 9 cells, 9 cells of content, no filler */
.ajm-bento{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sm)}
.ajm-tile{
  position:relative;display:flex;flex-direction:column;gap:10px;
  padding:22px;border-radius:var(--r-md);
  background:color-mix(in oklab,var(--surface-2) 72%,transparent);
  border:1px solid var(--line);
  transition:transform .4s var(--ease),border-color .4s var(--ease),background .4s var(--ease);
}
.ajm-tile:hover,.ajm-tile:focus-visible{transform:translateY(-4px);border-color:var(--accent);background:color-mix(in oklab,var(--surface-2) 92%,var(--accent))}
.ajm-tile__icon{width:26px;height:26px;color:var(--accent-soft);flex:none}
.ajm-tile__name{font-weight:700;font-size:1.02rem;color:var(--ink)}
.ajm-tile__meta{font-size:.87rem;color:var(--muted);word-break:break-word}
.ajm-tile__go{margin-top:auto;padding-top:10px;font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;color:var(--accent-soft);display:flex;align-items:center;gap:8px}
.ajm-tile__go svg{width:14px;height:14px;transition:transform .35s var(--ease)}
.ajm-tile:hover .ajm-tile__go svg{transform:translateX(4px)}

.ajm-tile--feature{
  grid-column:span 2;grid-row:span 2;justify-content:flex-end;padding:var(--md);
  background:
    radial-gradient(120% 100% at 8% 100%,color-mix(in oklab,var(--accent) 26%,transparent) 0%,transparent 62%),
    color-mix(in oklab,var(--surface-2) 86%,transparent);
}
.ajm-tile--feature .ajm-tile__icon{width:34px;height:34px;color:var(--accent-soft)}
.ajm-tile--feature .ajm-tile__name{font-family:var(--font-display);font-weight:600;font-size:clamp(1.5rem,2.6vw,2.05rem);line-height:1.1}
.ajm-tile--feature .ajm-tile__meta{font-size:1rem;max-width:40ch}
.ajm-badge{
  align-self:flex-start;display:inline-flex;align-items:center;gap:8px;
  background:var(--accent);color:var(--on-accent);
  font-size:.72rem;font-weight:800;letter-spacing:.2em;text-transform:uppercase;
  padding:7px 14px;border-radius:var(--r-pill);margin-bottom:auto;
}

/* ---------- footer ---------- */
.ajm-foot{border-top:1px solid var(--line);padding-block:var(--md) var(--lg)}
.ajm-foot__in{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--sm) var(--md)}
.ajm-foot__brand{display:flex;align-items:center;gap:12px}
.ajm-foot__star{width:20px;height:20px;color:var(--accent-soft);opacity:.7}
.ajm-foot__name{font-family:var(--font-display);font-weight:500;font-size:1rem}
.ajm-foot__small{font-size:.83rem;color:var(--muted)}

/* ---------- concealed staff entry ---------- */
.ajm-door{
  position:fixed;right:18px;bottom:18px;z-index:60;
  width:46px;height:46px;display:grid;place-items:center;
  border-radius:var(--r-pill);color:var(--accent-soft);
  background:color-mix(in oklab,var(--surface-2) 90%,transparent);
  border:1px solid var(--line);
  opacity:0;pointer-events:none;transform:translateY(8px) scale(.88);
  transition:opacity .45s var(--ease),transform .45s var(--ease);
}
/* Hidden but never unreachable: pointer-events stops accidental public clicks,
   while the element stays focusable so Tab still finds it if the script fails. */
.ajm-door.is-near,.ajm-door:focus-visible{opacity:1;pointer-events:auto;transform:none}
.ajm-door svg{width:18px;height:18px}
@media (prefers-reduced-motion:reduce){.ajm-door{transition-duration:.01ms}}

/* ==========================================================================
   SCROLL REVEALS
   Preferred path is a native CSS view() timeline, which ties the animation to
   the element's position in the viewport. Browsers without it fall back to an
   IntersectionObserver class. With no JavaScript at all, content is visible.
   ========================================================================== */
@keyframes ajmVisible{
  from{opacity:0;transform:translateY(60px) scale(.95)}
  to{opacity:1;transform:translateY(0) scale(1)}
}
html.ajm-js:not(.ajm-sdt) .ajm-reveal{opacity:0;transform:translateY(60px) scale(.95);transition:opacity .9s var(--ease),transform .9s var(--ease)}
html.ajm-js:not(.ajm-sdt) .ajm-reveal.is-in{opacity:1;transform:none}
html.ajm-js:not(.ajm-sdt) .ajm-reveal[data-d='1']{transition-delay:.09s}
html.ajm-js:not(.ajm-sdt) .ajm-reveal[data-d='2']{transition-delay:.18s}
html.ajm-js:not(.ajm-sdt) .ajm-reveal[data-d='3']{transition-delay:.27s}
html.ajm-js:not(.ajm-sdt) .ajm-reveal[data-d='4']{transition-delay:.36s}

@supports (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference){
    html.ajm-sdt .ajm-reveal{
      animation-name:ajmVisible;animation-duration:1s;animation-fill-mode:both;
      animation-timing-function:var(--ease);
      animation-timeline:view();animation-range:entry 0% cover 30%;
      will-change:transform,opacity;
    }
    /* The hero sits above the fold, so it plays once on load instead. */
    html.ajm-sdt .ajm-hero .ajm-reveal{
      animation-name:ajmVisible;animation-duration:.95s;animation-timeline:auto;animation-range:normal;
    }
    html.ajm-sdt .ajm-hero .ajm-reveal[data-d='1']{animation-delay:.10s}
    html.ajm-sdt .ajm-hero .ajm-reveal[data-d='2']{animation-delay:.20s}
    html.ajm-sdt .ajm-hero .ajm-reveal[data-d='3']{animation-delay:.30s}
    html.ajm-sdt .ajm-hero .ajm-reveal[data-d='4']{animation-delay:.40s}
  }
}
@media (prefers-reduced-motion:reduce){
  html.ajm-js .ajm-reveal{opacity:1;transform:none;transition:none;animation:none}
}

@view-transition{navigation:auto}

/* ---------- responsive ---------- */
@media (max-width:980px){
  .ajm-hero__in{grid-template-columns:1fr;gap:var(--md)}
  .ajm-hero__copy{max-width:none}
  .ajm-portrait{max-width:440px}
  .ajm-band__in{grid-template-columns:1fr;gap:var(--md)}
  .ajm-bento{grid-template-columns:repeat(2,1fr)}
  .ajm-tile--feature{grid-column:span 2;grid-row:span 1}
}
@media (max-width:620px){
  body.ajm{font-size:16px}
  .ajm-head__in{height:68px}
  .ajm-brand__txt b{font-size:1.06rem}
  .ajm-brand__txt span{display:none}
  .ajm-head .ajm-btn{padding:10px 16px;font-size:.8rem}
  .ajm-head .ajm-btn svg{display:none}
  .ajm-head .ajm-btn__full{display:none}
  .ajm-head .ajm-btn__brief{display:inline}
  .ajm-fact{grid-template-columns:1fr;gap:6px;padding-block:20px}
  .ajm-fact dt{padding-top:0}
  .ajm-bento{grid-template-columns:1fr}
  .ajm-tile--feature{grid-column:span 1}
  .ajm-foot__in{flex-direction:column;align-items:flex-start}
  .ajm-door{right:14px;bottom:14px}
  .ajm-aurora i{opacity:.4}
}