/* =========================
   About page (lean + optimized)
   ========================= */

:root{
  --gold:#c8a45b;
  --gold2:#e6cd8c;
  --cream:#fffbe3;
  --txt:#fff;
  --revealY:16px;
  --revealDur:.6s;
  --revealEase:ease;
}

/* ===== Base */
html,body{
  max-width:100vw;
  overflow-x:hidden;
  background:#000;
  color:var(--txt);
}
img{
  display:block;
  max-width:100%;
  -webkit-user-drag:none;
  user-select:none;
}
.font-serif,h1,h2,h3,h4,h5,h6{font-family:"DM Serif Display",serif;}
.nlx-body{
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  font-size:1.125rem;
  line-height:1.8;
  color:rgba(255,255,255,.9);
  max-width:62ch;
}

/* bg fixed only on desktop */
.bg-fixed-desktop{background-attachment:scroll;}
@media (min-width:768px){.bg-fixed-desktop{background-attachment:fixed;}}

/* ===== Utilities */
.nlx-title{
  font-family:"DM Serif Display",serif;
  font-weight:700;
  font-size:clamp(34px,5vw,56px);
  line-height:1.1;
  letter-spacing:.2px;
  color:#fff;
  text-wrap:balance;
}
.nlx-divider{
  height:2px;
  width:120px;
  border-radius:2px;
  background:linear-gradient(90deg,var(--gold),var(--cream),var(--gold));
}

/* logo style gradient */
.nlx-logo-gradient{
  background:linear-gradient(180deg,var(--gold) 0%,var(--gold2) 50%,#fff 100%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}

/* safety for Tailwind rounded-[28px] */
figure.rounded-\[28px\]{overflow:hidden;}

/* CTA word gradient (fix bottom clipping + underlit look) */
.nlx-gradient-text{
  display:inline-block;
  padding-bottom:.08em;
  margin-bottom:-.08em;

  background:linear-gradient(180deg,var(--gold),var(--gold2),#ffffff);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}


/* =========================================================
   Reveal system (one rule, many targets)
   ========================================================= */

/* hidden before reveal */
#about-hero #about-hero-text,
#about-hero .max-w-4xl,
#calgary-premium > .max-w-7xl,
#our-story > .max-w-7xl,
#our-philosophy > .max-w-6xl,
#commitment > .max-w-7xl,
#contact-cta .nlx-gradient-border,
#our-promise > .max-w-5xl,
#what-we-do > .max-w-7xl,
#our-focus > .max-w-7xl,
#why-different > .max-w-6xl{
  opacity:0;
  transform:translateY(var(--revealY));
  will-change:opacity,transform;
  transition:
    opacity var(--revealDur) var(--revealEase),
    transform var(--revealDur) var(--revealEase);
}

/* visible */
.is-visible{
  opacity:1 !important;
  transform:none !important;
}

/* legacy fade support */
.fade-item,.fade-block{
  opacity:0;
  transform:translateY(var(--revealY));
  will-change:opacity,transform;
  transition:
    opacity var(--revealDur) var(--revealEase),
    transform var(--revealDur) var(--revealEase);
}
.fade-item.is-visible,.fade-block.is-visible{opacity:1;transform:none;}

/* Reduced motion */
@media (prefers-reduced-motion:reduce){
  #about-hero #about-hero-text,
  #about-hero .max-w-4xl,
  #calgary-premium > .max-w-7xl,
  #our-story > .max-w-7xl,
  #our-philosophy > .max-w-6xl,
  #commitment > .max-w-7xl,
  #contact-cta .nlx-gradient-border,
  #our-promise > .max-w-5xl,
  #what-we-do > .max-w-7xl,
  #our-focus > .max-w-7xl,
  #why-different > .max-w-6xl,
  .fade-item,.fade-block{
    transition:none !important;
    opacity:1 !important;
    transform:none !important;
  }
}

/* =========================
   Section-specific styles
   ========================= */

/* Our Promise */
#our-promise .nlx-body{text-align:center;margin-inline:auto;}
#our-promise .gold-glow{
  pointer-events:none;
  position:absolute;
  inset-inline:0;
  top:-2rem;
  height:10rem;
  filter:blur(32px);
  opacity:.3;
  background:radial-gradient(60% 60% at 50% 50%, rgba(200,164,91,.18), transparent);
}

/* What We Do */
#what-we-do .nlx-body{text-align:center;margin-inline:auto;}
@media (min-width:1024px){
  #what-we-do .nlx-body{text-align:left;margin-inline:0;}
}

/* Our Focus */
#our-focus .nlx-body{text-align:center;margin-inline:auto;}
@media (min-width:1024px){
  #our-focus .nlx-body{text-align:center;}
}

/* Our Story */
#our-story .story-title{
  font-size:clamp(30px,5vw,54px);
  line-height:1.08;
  text-align:center;
}
#our-story .story-body{max-width:62ch;margin-inline:auto;text-align:center;}
#our-story .story-figure img{width:100%;object-fit:cover;}
@media (min-width:1280px){
  #our-story .grid{
    display:grid;
    grid-template-columns:repeat(12,minmax(0,1fr));
    gap:3rem;
    align-items:start;
  }
  #our-story .story-figure{grid-column:span 6 / span 6;}
  #our-story .story-text{
    grid-column:span 6 / span 6;
    display:flex;
    flex-direction:column;
    align-items:center;
    text-align:center;
  }
}

/* Our Philosophy */
#our-philosophy h3,#our-philosophy p{text-wrap:balance;}
#our-philosophy .grid{display:grid;grid-template-columns:1fr;gap:3rem;}
@media (min-width:1280px){
  #our-philosophy .grid{grid-template-columns:repeat(3,1fr);}
}

/* About hero: prevent heading clipping on small screens */
@media (max-width:1279px){
  #about-hero h1,#about-hero h2{
    white-space:normal !important;
    overflow-wrap:anywhere;
  }
}

/* Image display tweak */
.media-contain-desktop{object-fit:cover;}
@media (min-width:1024px){.media-contain-desktop{object-fit:contain;}}

/* Optional inner ring */
.nx-ring{box-shadow:0 0 0 1px rgba(255,255,255,.1) inset;}

/* Gradient frame utility */
.nlx-gradient-border{
  position:relative;
  padding:2px;
  border-radius:1.5rem;
  background:linear-gradient(180deg,var(--gold),var(--gold2),#fff);
}
.nlx-gradient-border > .nlx-border-inner{
  background:#000;
  border-radius:inherit;
}

/* CTA: only keep what’s needed (no extra overrides) */
#contact-cta .nlx-gradient-border{
  background:linear-gradient(180deg,var(--gold),var(--gold2),#fff) !important;
}

/* Flip order on mobile for Our Focus */
@media (max-width:767px){
  #our-focus .max-w-7xl{
    display:flex;
    flex-direction:column-reverse;
  }
}

@media (min-width:768px) and (max-width:1023px){
  #our-focus .max-w-7xl{
    display:flex;
    flex-direction:column;
  }
  #our-focus .max-w-7xl > figure{ order:2; }
  #our-focus .max-w-7xl > div{ order:1; }
}

/* Our Commitment: Tablet (iPad Mini/Air) title first then image */
@media (min-width:768px) and (max-width:1023px){
  #commitment .max-w-7xl{
    display:flex;
    flex-direction:column;
  }
  #commitment .max-w-7xl > article{ order:1; }
  #commitment .max-w-7xl > figure{ order:2; }
}


/* iPad Mini + iPad Air: force CTA to stack + center */
@media (min-width:768px) and (max-width:1023px){
  #contact-cta .md\:grid-cols-\[1\.2fr_auto\]{grid-template-columns:1fr !important;}
  #contact-cta .md\:text-left{text-align:center !important;}
  #contact-cta .md\:mx-0{margin-left:auto !important;margin-right:auto !important;}
  #contact-cta .md\:items-end{align-items:center !important;}
}

/* Slightly less white in hero gradient */
#about-hero h2,
#about-hero .nlx-wordgrad{
  background: linear-gradient(
    180deg,
    var(--gold) 0%,
    var(--gold2) 50%,
    #ffffff 80%,
    #ffffff 100%
  ) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  color: transparent !important;
}