/* ==========================================================================
   NAS Warm Play v2.0 — design uplift layer
   Loads AFTER nas-theme.css. Restyles the existing 192 `nas-*` classes so all
   34 pages upgrade at once, and adds the new photographic components.
   Tokens per nas-design-craft · Motion per nas-motion-system.
   ========================================================================== */

/* ============================ 1. tokens ============================ */
:root{
  /* accessible clay derivatives — base --as-clay fails AA as small text (4.00:1)
     and as a button fill under white (4.35:1). These pass. */
  --as-clay-dark:#a8542c;     /* accent button fill — white on this = 5.29:1 */
  --as-clay-darker:#8f4827;   /* accent button hover — 6.72:1 */
  --as-clay-ink:#9e502b;      /* clay as SMALL TEXT — 5.31 on paper, 4.82 on paper-deep */

  /* dark editorial surface — carries the photography */
  --as-night:#171a15;
  --as-night-soft:#22261f;
  --as-night-line:rgba(250,245,234,.14);
  --as-night-ink:#ece5d6;
  --as-night-ink-soft:rgba(236,229,214,.68);

  /* fluid type ramp */
  --step--1:clamp(.83rem,.80rem + .15vw,.90rem);
  --step-0:clamp(1rem,.95rem + .25vw,1.125rem);
  --step-1:clamp(1.25rem,1.10rem + .60vw,1.5rem);
  --step-2:clamp(1.6rem,1.30rem + 1.20vw,2.15rem);
  --step-3:clamp(2rem,1.50rem + 2.20vw,3rem);
  --step-4:clamp(2.6rem,1.70rem + 4.00vw,4.25rem);

  /* space */
  --space-xs:8px; --space-sm:12px; --space-md:16px; --space-lg:24px;
  --space-xl:32px; --space-2xl:48px; --space-3xl:64px; --space-4xl:96px;

  /* shape — one radius system */
  --radius:12px;
  --radius-sm:8px;
  --shadow-soft:0 1px 2px rgba(33,43,35,.04), 0 8px 24px rgba(33,43,35,.06);
  --shadow-lift:0 2px 4px rgba(33,43,35,.05), 0 18px 42px rgba(33,43,35,.10);

  --ease-out-soft:cubic-bezier(.22,1,.36,1);
  --ease-in-out:cubic-bezier(.65,0,.35,1);
  --dur-5:700ms;

  --nas-container:1180px;
  --nas-gutter:clamp(20px,5vw,40px);
}

/* ============================ 2. base ============================ */
body{
  font-family:Inter,'Nunito Sans',system-ui,-apple-system,sans-serif;
  font-size:var(--step-0);
  line-height:1.65;
  background:var(--as-paper);
  color:var(--as-ink);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
h1,h2,h3,h4{
  font-family:Fraunces,Georgia,'Times New Roman',serif;
  font-weight:600;
  line-height:1.08;
  letter-spacing:-.018em;
  color:var(--as-ink);
  text-wrap:balance;
}
h1{font-size:var(--step-4);letter-spacing:-.028em}
h2{font-size:var(--step-3)}
h3{font-size:var(--step-2)}
h4{font-size:var(--step-1);letter-spacing:-.01em}
p{text-wrap:pretty}
::selection{background:var(--as-sun);color:var(--as-ink)}
:focus-visible{outline:none;box-shadow:0 0 0 3px rgba(30,77,53,.35);border-radius:4px}

/* body copy must not run the full width — the #1 amateur tell */
.nas-lead{
  font-size:var(--step-1);line-height:1.5;
  color:var(--as-ink-soft);max-width:52ch;
}
.nas-rich-text p,
.nas-section p:not(.nas-lead):not([class*="__"]){max-width:64ch}

.nas-shell{
  max-width:var(--nas-container);
  margin-inline:auto;
  padding-inline:var(--nas-gutter);
}
.nas-section{padding-block:clamp(64px,9vw,128px)}
.nas-section-head{margin-bottom:var(--space-2xl)}

/* eyebrow — now AA compliant */
.nas-eyebrow{
  display:inline-block;
  font:600 var(--step--1)/1 Inter,'Nunito Sans',sans-serif;
  text-transform:uppercase;
  letter-spacing:.14em;
  color:var(--as-clay-ink);
  margin-bottom:var(--space-md);
}

/* ============================ 3. buttons ============================ */
.nas-btn{
  font-family:Inter,'Nunito Sans',sans-serif;font-weight:600;font-size:var(--step-0);
  line-height:1;letter-spacing:.01em;
  padding:14px 24px 15px;
  border-radius:var(--radius-sm);
  border:1px solid transparent;
  display:inline-flex;align-items:center;gap:10px;
  box-shadow:none;
  transition:background var(--dur-2) var(--ease-out-soft),
             color var(--dur-2) var(--ease-out-soft),
             transform var(--dur-1) var(--ease-out-soft),
             border-color var(--dur-2) var(--ease-out-soft);
}
.nas-btn:active{transform:scale(.98)}
.nas-btn--primary{background:var(--as-moss);color:var(--as-paper)}
.nas-btn--primary:hover{background:var(--as-moss-dark);transform:none;box-shadow:none}
.nas-btn--accent{background:var(--as-clay-dark);color:#fff}
.nas-btn--accent:hover{background:var(--as-clay-darker)}
.nas-btn--ghost{background:transparent;color:var(--as-moss);border-color:var(--as-line)}
.nas-btn--ghost:hover{border-color:var(--as-moss);background:var(--as-paper-deep)}
.nas-btn--small{padding:11px 18px 12px;font-size:.94rem}

.nas-link{
  color:var(--as-moss);font-weight:600;text-decoration:none;
  background:linear-gradient(var(--as-sun),var(--as-sun)) 0 100%/0 2px no-repeat;
  transition:background-size var(--dur-2) var(--ease-out-soft);
  padding-bottom:2px;
}
.nas-link:hover{background-size:100% 2px}

/* ============================ 4. header ============================ */
.nas-site-header{
  position:fixed;inset:0 0 auto 0;z-index:100;
  background:transparent;
  border-bottom:1px solid transparent;
  box-shadow:none;
  transition:background var(--dur-3) var(--ease-out-soft),
             border-color var(--dur-3) var(--ease-out-soft);
}
.nas-site-header.is-scrolled{
  background:rgba(250,245,234,.88);
  backdrop-filter:blur(14px) saturate(1.3);
  -webkit-backdrop-filter:blur(14px) saturate(1.3);
  border-bottom-color:var(--as-line);
}
.nas-site-header__inner{
  display:flex;align-items:center;justify-content:space-between;gap:var(--space-lg);
  min-height:76px;
}
.nas-brand{display:flex;align-items:center;gap:11px;flex:none;text-decoration:none}
.nas-brand img{height:42px;width:auto}
.nas-brand__text strong{
  display:block;font-family:Fraunces,serif;font-weight:600;
  font-size:1.05rem;color:var(--as-moss);line-height:1.1;
}
.nas-brand__text small{
  display:block;font-size:.55rem;font-weight:600;
  letter-spacing:.2em;text-transform:uppercase;
  color:var(--as-ink-soft);margin-top:4px;
}
.nas-nav__list{display:flex;align-items:center;gap:clamp(12px,2vw,26px);list-style:none;margin:0;padding:0}
.nas-nav__list a{
  font-weight:500;font-size:.95rem;color:var(--as-ink);text-decoration:none;
  padding-bottom:3px;
  background:linear-gradient(var(--as-sun),var(--as-sun)) 0 100%/0 2px no-repeat;
  transition:background-size var(--dur-2) var(--ease-out-soft),color var(--dur-2);
}
.nas-nav__list a:hover,
.nas-nav__list .current-menu-item > a{background-size:100% 2px;color:var(--as-moss)}
.nas-menu-button{border-radius:var(--radius-sm);background:var(--as-moss);border:0}
.nas-menu-button span:not(.screen-reader-text){background:var(--as-paper)}

/* ============================ 5. hero ============================ */
.nas-hero{
  padding-top:calc(76px + clamp(36px,6vw,80px));
  padding-bottom:clamp(48px,7vw,96px);
  background:var(--as-paper);
}
.nas-hero__inner{
  display:grid;grid-template-columns:1.02fr 1fr;
  gap:clamp(32px,5vw,72px);align-items:center;
}
.nas-hero__copy h1{margin-bottom:var(--space-lg)}
.nas-hero__copy h1 em{font-style:normal;color:var(--as-moss);position:relative;white-space:nowrap}
.nas-hero__copy h1 em::after{
  content:"";position:absolute;left:0;right:0;bottom:.02em;height:.075em;
  background:var(--as-sun);border-radius:2px;
  transform:scaleX(0);transform-origin:left;
  transition:transform var(--dur-5) var(--ease-out-soft) .35s;
}
.nas-hero.is-lit h1 em::after{transform:scaleX(1)}
.nas-hero__image{position:relative;border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow-lift)}
.nas-hero__image img{width:100%;aspect-ratio:4/5;object-fit:cover}
.nas-hero__legacy{
  position:absolute;right:16px;top:7%;
  background:rgba(250,245,234,.94);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  border:1px solid var(--as-line);border-radius:var(--radius);
  padding:14px 20px;box-shadow:var(--shadow-soft);text-align:center;
}
.nas-hero__legacy strong{display:block;font-family:Fraunces,serif;font-size:1.9rem;line-height:1;color:var(--as-moss)}
.nas-hero__legacy span{display:block;font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;color:var(--as-ink-soft);margin-top:5px}

.nas-trust-row,.nas-trust-strip{
  display:flex;flex-wrap:wrap;gap:var(--space-sm) var(--space-lg);
  margin-top:var(--space-xl);padding-top:var(--space-lg);
  border-top:1px solid var(--as-line);
  font-size:var(--step--1);color:var(--as-ink-soft);list-style:none;
}
.nas-trust-row li,.nas-trust-strip li,
.nas-trust-row span,.nas-trust-strip span{display:inline-flex;align-items:center;gap:8px}
.nas-trust-row li::before,.nas-trust-strip li::before{
  content:"";width:5px;height:5px;border-radius:50%;background:var(--as-sun);flex:none;
}

/* ============================ 6. page hero (inner pages) ============================ */
.nas-page-hero{
  padding-top:calc(76px + clamp(44px,6vw,80px));
  padding-bottom:clamp(40px,5vw,64px);
  border-bottom:1px solid var(--as-line);
  background:var(--as-paper);
}
.nas-page-hero__grid{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(28px,5vw,64px);align-items:center}
.nas-page-hero__aside{border-radius:var(--radius);overflow:hidden}
.nas-page-hero__aside img{width:100%;aspect-ratio:3/2;object-fit:cover;border-radius:var(--radius)}
.nas-page-photo,.nas-page-photo img{border-radius:var(--radius)}
.nas-page-photo img{width:100%;object-fit:cover}

/* ============================ 7. cards ============================ */
.nas-content-card,.nas-note-card,.nas-proof-card,.nas-authority-card,
.nas-visual-card,.nas-campus-card,.nas-form-card,.nas-year-card,.nas-letter-card{
  background:var(--as-paper-deep);
  border:1px solid var(--as-line);
  border-radius:var(--radius);
  box-shadow:none;
  transition:transform var(--dur-2) var(--ease-out-soft),box-shadow var(--dur-2) var(--ease-out-soft);
}
.nas-content-card:hover,.nas-authority-card:hover,.nas-proof-card:hover,.nas-visual-card:hover{
  transform:translateY(-3px);box-shadow:var(--shadow-soft);
}
.nas-content-card h3,.nas-authority-card h3,.nas-proof-card h3,.nas-visual-card h3{
  font-family:Fraunces,serif;font-size:var(--step-1);line-height:1.15;letter-spacing:-.01em;
}
/* left-align card content — centred icon cards are the generic tell */
.nas-content-card,.nas-authority-card,.nas-proof-card{text-align:left}

/* ============================ 8. splits & steps ============================ */
.nas-split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,5vw,76px);align-items:center}
.nas-split img{border-radius:var(--radius);width:100%;object-fit:cover}

.nas-steps{list-style:none;margin:var(--space-2xl) 0 0;padding:0;display:grid;gap:0}
.nas-steps > li{
  display:grid;grid-template-columns:auto 1fr;gap:clamp(20px,4vw,52px);
  padding-block:var(--space-2xl);
  border-top:1px solid var(--as-line);align-items:start;
}
.nas-steps > li:last-child{border-bottom:1px solid var(--as-line)}
.nas-steps > li::before{
  content:counter(nas-step,decimal-leading-zero);
  font-family:Fraunces,serif;font-weight:600;
  font-size:clamp(2.2rem,5vw,3.4rem);line-height:.9;
  color:#8c7f5c;                 /* large text, 3.30:1 — passes AA for large */
  letter-spacing:-.03em;font-variant-numeric:tabular-nums;
}
.nas-steps{counter-reset:nas-step}
.nas-steps > li{counter-increment:nas-step}

/* ============================ 9. FAQ ============================ */
.nas-faq-list{border-top:1px solid var(--as-line);margin-top:var(--space-2xl)}
.nas-faq-list > *{border-bottom:1px solid var(--as-line)}
.nas-faq-list button,
.nas-faq-list summary{
  font-family:Fraunces,serif;font-weight:600;font-size:var(--step-1);
  line-height:1.25;letter-spacing:-.01em;color:var(--as-ink);
  padding:var(--space-lg) 0;cursor:pointer;
  transition:color var(--dur-2) var(--ease-out-soft);
}
.nas-faq-list button:hover,.nas-faq-list summary:hover{color:var(--as-moss)}
.nas-faq-list p{color:var(--as-ink-soft);max-width:64ch}

/* ============================ 10. forms ============================ */
.nas-field input,.nas-field select,.nas-field textarea,
.nas-form input,.nas-form select,.nas-form textarea{
  font:var(--step-0)/1.4 Inter,'Nunito Sans',sans-serif;color:var(--as-ink);
  background:var(--as-paper);border:1px solid var(--as-line);
  border-radius:var(--radius-sm);padding:12px 14px;
  transition:border-color var(--dur-2) var(--ease-out-soft),box-shadow var(--dur-2) var(--ease-out-soft);
}
.nas-field input:focus,.nas-field select:focus,.nas-field textarea:focus,
.nas-form input:focus,.nas-form select:focus,.nas-form textarea:focus{
  outline:none;border-color:var(--as-moss);box-shadow:0 0 0 3px rgba(30,77,53,.12);
}
.nas-field label{
  font:600 var(--step--1)/1.3 Inter,'Nunito Sans',sans-serif;
  letter-spacing:.06em;text-transform:uppercase;color:var(--as-ink-soft);
}

/* ============================ 11. footer ============================ */
.nas-footer{background:var(--as-moss);color:var(--as-paper)}
.nas-footer a{color:rgba(250,245,234,.82);transition:color var(--dur-2) var(--ease-out-soft)}
.nas-footer a:hover{color:var(--as-sun)}
.nas-footer h2{
  font-family:Inter,'Nunito Sans',sans-serif;font-weight:600;
  font-size:var(--step--1);letter-spacing:.14em;text-transform:uppercase;
  color:rgba(250,245,234,.7);            /* 5.31:1 */
  margin-bottom:var(--space-md);
}
.nas-footer__brand p{color:rgba(250,245,234,.72);font-size:.95rem;max-width:36ch}
.nas-footer ul{list-style:none;margin:0;padding:0;display:grid;gap:10px;font-size:.95rem}
.nas-footer__bottom{
  border-top:1px solid rgba(250,245,234,.15);
  padding-block:var(--space-lg);margin-top:clamp(40px,5vw,64px);
  display:flex;flex-wrap:wrap;gap:var(--space-sm) var(--space-lg);justify-content:space-between;
  font-size:var(--step--1);color:rgba(250,245,234,.7);
}
.nas-footer__bottom p{margin:0}

.nas-whatsapp{
  width:54px;height:54px;border-radius:50%;
  background:var(--as-moss);color:var(--as-paper);
  display:grid;place-items:center;box-shadow:var(--shadow-lift);
  transition:transform var(--dur-2) var(--ease-out-soft),background var(--dur-2);
}
.nas-whatsapp:hover{transform:scale(1.06);background:var(--as-moss-dark)}

/* ============================ 12. NEW — night surface ============================ */
.nas-night{background:var(--as-night);color:var(--as-night-ink)}
.nas-night h1,.nas-night h2,.nas-night h3,.nas-night h4{color:var(--as-night-ink)}
.nas-night p,.nas-night .nas-lead{color:var(--as-night-ink-soft)}
.nas-night .nas-eyebrow{color:var(--as-sun)}
.nas-night .nas-link{color:var(--as-sun)}
.nas-night .nas-steps > li{border-color:var(--as-night-line)}
.nas-night .nas-steps > li::before{color:rgba(236,229,214,.4)}
.nas-night .nas-btn--ghost{color:var(--as-night-ink);border-color:var(--as-night-line)}
.nas-night .nas-btn--ghost:hover{border-color:var(--as-night-ink);background:rgba(250,245,234,.07)}
.nas-night .nas-content-card{background:var(--as-night-soft);border-color:var(--as-night-line)}

/* ============================ 13. NEW — photographic breaker ============================ */
.nas-breaker{position:relative;overflow:hidden;background:var(--as-night)}
.nas-breaker img{width:100%;height:clamp(300px,56vh,600px);object-fit:cover;opacity:.94}
.nas-breaker::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to top,rgba(10,12,9,.72),rgba(10,12,9,.05) 55%);
}
.nas-breaker__cap{
  position:absolute;left:var(--nas-gutter);right:var(--nas-gutter);
  bottom:clamp(24px,4vw,48px);max-width:min(560px,86vw);z-index:1;
}
.nas-breaker__cap p{
  font-family:Fraunces,serif;font-weight:500;font-size:var(--step-2);
  line-height:1.2;letter-spacing:-.015em;color:#fff;margin:0;
}
.nas-breaker__cap span{
  display:block;margin-top:12px;font-size:var(--step--1);
  letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.74);
}

/* ============================ 14. NEW — mosaic ============================ */
.nas-mosaic{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--space-sm)}
.nas-mosaic__cell{overflow:hidden;border-radius:var(--radius-sm);margin:0}
.nas-mosaic__cell img{width:100%;height:100%;object-fit:cover;aspect-ratio:1/1;
  transition:transform var(--dur-5) var(--ease-out-soft)}
.nas-mosaic__cell:hover img{transform:scale(1.05)}
.nas-mosaic__cell.is-tall{grid-row:span 2}
.nas-mosaic__cell.is-tall img{aspect-ratio:1/2.06}

/* ============================ 15. NEW — promise band ============================ */
.nas-band{background:var(--as-moss);color:var(--as-paper);padding-block:clamp(72px,10vw,136px);text-align:center}
.nas-band p{
  font-family:Fraunces,serif;font-weight:500;
  font-size:clamp(1.55rem,3.3vw,2.6rem);line-height:1.25;letter-spacing:-.02em;
  max-width:22ch;margin-inline:auto;color:var(--as-paper);
}
.nas-band cite{
  display:block;margin-top:var(--space-xl);font-style:normal;
  font-family:Inter,'Nunito Sans',sans-serif;font-size:var(--step--1);
  letter-spacing:.14em;text-transform:uppercase;color:rgba(250,245,234,.72);
}

/* ============================ 16. NEW — answer block (AEO) ============================ */
/* The "short answer" a search engine or AI assistant can lift verbatim. */
.nas-answer{
  background:var(--as-paper-deep);
  border:1px solid var(--as-line);
  border-left:3px solid var(--as-moss);
  border-radius:var(--radius);
  padding:var(--space-lg) var(--space-xl);
  margin-block:var(--space-xl);
}
.nas-answer__label{
  font:600 var(--step--1)/1 Inter,'Nunito Sans',sans-serif;
  text-transform:uppercase;letter-spacing:.14em;color:var(--as-clay-ink);
  display:block;margin-bottom:10px;
}
.nas-answer p{font-size:var(--step-1);line-height:1.5;color:var(--as-ink);max-width:60ch;margin:0}

/* ============================ 17. motion ============================ */
.nas-reveal{opacity:0;transform:translateY(16px)}
.nas-reveal.is-in,.nas-reveal.is-visible{
  opacity:1;transform:none;
  transition:opacity var(--dur-3) var(--ease-out-soft),transform var(--dur-3) var(--ease-out-soft);
}
.nas-stagger > *{opacity:0;transform:translateY(14px)}
.nas-stagger.is-in > *,.nas-stagger.is-visible > *{
  opacity:1;transform:none;
  transition:opacity var(--dur-3) var(--ease-out-soft),transform var(--dur-3) var(--ease-out-soft);
}
.nas-stagger.is-in > *:nth-child(1){transition-delay:0ms}
.nas-stagger.is-in > *:nth-child(2){transition-delay:70ms}
.nas-stagger.is-in > *:nth-child(3){transition-delay:140ms}
.nas-stagger.is-in > *:nth-child(4){transition-delay:210ms}
.nas-stagger.is-in > *:nth-child(5){transition-delay:280ms}
.nas-stagger.is-in > *:nth-child(6){transition-delay:350ms}

/* ============================ 18. decorative motifs — restrained ============================ */
/* v1 drew a lot of decorative SVG furniture. Keep it, quiet it right down:
   restraint beats decoration, and the photography is now doing this job. */
.nas-motif-line,.nas-motif-trail,.nas-motif-leaf,.nas-motif-bubble,
.nas-motif-block,.nas-motif-root,.nas-motif-step,.nas-motif-wing,
.nas-motif-plane,.nas-motif-pencil,.nas-motif-paper,.nas-motif-dot{opacity:.35}
.nas-story-motif{opacity:.4}

/* ============================ 19. responsive ============================ */
@media (max-width:1000px){
  .nas-hero__inner,.nas-page-hero__grid,.nas-split{grid-template-columns:1fr;gap:var(--space-2xl)}
  .nas-hero__image{max-width:540px}
  .nas-hero__legacy{right:0}
}
@media (max-width:640px){
  .nas-mosaic{grid-template-columns:repeat(2,1fr)}
  .nas-steps > li{grid-template-columns:1fr;gap:var(--space-sm)}
  .nas-breaker__cap p{font-size:var(--step-1)}
  .nas-answer{padding:var(--space-lg)}
}

/* ============================ 20. reduced motion ============================ */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms!important;
    transition-duration:.01ms!important;
    scroll-behavior:auto!important;
  }
  .nas-reveal,.nas-stagger > *{opacity:1;transform:none}
  .nas-hero__copy h1 em::after{transform:scaleX(1)}
}

/* ============================ 21. print ============================ */
@media print{
  .nas-site-header,.nas-whatsapp,.nas-mobile-drawer,.nas-breaker{display:none!important}
  .nas-reveal,.nas-stagger > *{opacity:1!important;transform:none!important}
  body{background:#fff;color:#000}
}