/* ============================================================
   Culture (benefits) — page-specific layout
   Depends on style.css (variables --blue/--navy/--mercury/--frame,
   fonts, .mono, .page-hero). Light sections on mercury ground.
   ============================================================ */

.cul{max-width:1920px;margin:0 auto;padding:clamp(3.5rem,7vw,6rem) var(--frame) 0}

/* intro lead under the hero */
.cul-intro{max-width:70ch;padding-bottom:clamp(2rem,4vw,3.5rem)}
.cul-intro p{font-weight:400;font-size:clamp(16px,1.7vw,22px);line-height:1.85;color:var(--blue)}
.cul-intro .cul-note{display:block;margin-top:.9rem;font-family:var(--font-m);
  font-size:.7rem;color:#8a8a90;text-transform:uppercase;letter-spacing:.05em}

/* a benefit group: mono label + card grid */
.cul-group{padding:clamp(2rem,4vw,3.2rem) 0;border-top:1px solid var(--line)}
.cul-group:first-of-type{border-top:0}
.cul-group-label{color:var(--blue);margin-bottom:2rem;display:block}

.cul-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem}
@media(max-width:960px){.cul-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.cul-grid{grid-template-columns:1fr}}

/* ===== cards — light frosted glass over the fixed background (non-clickable, no hover) ===== */
.cul-card{display:flex;flex-direction:column;border-radius:14px;padding:1.8rem 1.7rem;
  background:rgba(255,255,255,.38);border:1px solid rgba(255,255,255,.7);
  -webkit-backdrop-filter:blur(24px) saturate(1.3);backdrop-filter:blur(24px) saturate(1.3)}
/* icon (left) + heading (right), description below */
.cul-head{display:flex;align-items:center;gap:1rem;margin-bottom:1rem}
.cul-icon{width:46px;height:46px;color:var(--blue);flex-shrink:0}
.cul-icon svg{width:100%;height:100%;display:block;overflow:visible;stroke-width:.9}
/* looping line-draw (per-path length via --l, set in JS): draw in → reverse back (yoyo) */
@keyframes culDraw{
  0%,12%   {stroke-dashoffset:var(--l,0)}
  88%,100% {stroke-dashoffset:0}
}
.cul-card.in .cul-icon svg path,
.cul-card.in .cul-icon svg circle,
.cul-card.in .cul-icon svg rect,
.cul-card.in .cul-icon svg line,
.cul-card.in .cul-icon svg polyline{animation:culDraw 2.4s var(--ease) infinite alternate}
@media(prefers-reduced-motion:reduce){
  .cul-icon svg *{animation:none !important;stroke-dashoffset:0 !important}
}
.cul-card h3{font-weight:400;font-size:clamp(16px,1.7vw,20px);letter-spacing:-.01em;margin:0}
.cul-card p{font-size:clamp(14px,1.4vw,15px);line-height:1.75;color:var(--blue)}
.cul-tag{display:inline-block;margin-top:.7rem;font-family:var(--font-m);font-size:.62rem;
  color:#8a8a90;text-transform:uppercase;letter-spacing:.06em}

/* Numbers — navy band, mercury text */
.cul-nums{background:var(--navy);color:var(--mercury);
  padding:clamp(4rem,8vw,7rem) var(--frame);margin-top:0}
.cul-nums-in{max-width:1920px;margin:0 auto}
.cul-nums-in>.mono{color:rgba(232,230,224,.7);margin-bottom:2.6rem;display:block}
.cul-nums-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1.4rem}
@media(max-width:900px){.cul-nums-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:480px){.cul-nums-grid{grid-template-columns:1fr}}
.cul-num{border-top:1px solid rgba(232,230,224,.4);padding-top:1.2rem}
.cul-num .cul-num-k{font-family:var(--font-m);font-size:.72rem;letter-spacing:.05em;
  text-transform:uppercase;color:rgba(232,230,224,.7);display:block;margin-bottom:.55rem}
.cul-num .cul-num-v{font-weight:400;font-size:clamp(24px,3vw,40px);line-height:1.1;letter-spacing:-.02em}
.cul-nums-note{margin-top:2.4rem;font-family:var(--font-m);font-size:.68rem;
  color:rgba(232,230,224,.55);text-transform:uppercase;letter-spacing:.05em;line-height:1.7}

/* ===== Culture: native fixed background (body.has-fixed removes main's transform) — faint + blurred ===== */
.cul{position:relative;z-index:0}
.cul::before,.cul::after{content:"";position:absolute;top:0;bottom:0;pointer-events:none}
/* Viewport-fixed backdrop as a real fixed layer (iOS-safe): background-attachment:fixed
   is broken on iOS Safari (scales to document height → zoomed). A position:fixed pseudo
   sized to the viewport gets correct center/cover sizing on every device. */
.cul::before{z-index:-2;position:fixed;top:0;left:0;width:100%;height:100%;
  background:url(../img/20260707_neflatest_001.webp) center/cover}
/* scrim removed — photo shown at original colour */
.cul::after{z-index:-1;left:calc(50% - 50vw);width:100vw;background:rgba(232,230,224,0)}
/* the fixed backdrop sits behind everything; opaque hero + related-links + footer must
   paint above it so the photo only shows through the translucent .cul cards region */
.vhero{position:relative;z-index:1}
.vlinks{position:relative;z-index:1}   /* full-bleed mercury ::before comes from style.css */