/* ════════════════════════════════════════════════════════════════════
   NITYAMA.COM — flattened production stylesheet
   Design system tokens + components, hand-flattened to plain CSS so the
   site renders with zero build step and works even if JS never loads.
   Life-Force palette (saffron / gold / terracotta) brought forward.
   ════════════════════════════════════════════════════════════════════ */

:root{
  /* neutrals */
  --bone:#F5EEE0; --cream:#ECE0CB; --sand:#DFCEB1; --clay:#C8B393;
  --umber:#6E6151; --umber-soft:#8A7C6A; --ink-soft:#382F26; --ink:#1C1813;
  /* life-force */
  --saffron:#C97B2C; --saffron-deep:#A35E18; --saffron-soft:#E6B987;
  --gold:#BFA04C; --terracotta:#B5523A;
  /* earth & sky */
  --dove:#BFD0DA; --dove-deep:#7E9AAA; --sage:#8B9A78;
  /* washes */
  --saffron-wash:#F3E2CC; --saffron-band:#EFD9B8; --gold-wash:rgba(191,160,76,.14);
  --veil-ink:rgba(28,24,19,.62); --veil-bone:rgba(245,238,224,.88);
  --line-on-bone:rgba(28,24,19,.12); --line-on-ink:rgba(245,238,224,.16);
  /* surfaces */
  --surface-page:var(--bone); --surface-card:#FBF6EC; --surface-sunken:var(--cream);
  --surface-ink:var(--ink); --surface-ink-2:#261F18;
  /* text */
  --text-strong:var(--ink); --text-body:var(--ink-soft); --text-muted:var(--umber);
  --text-faint:var(--umber-soft); --text-on-ink:var(--bone); --text-on-ink-muted:#C9BBA4;
  --text-accent:var(--saffron-deep);
  --accent:var(--saffron); --accent-hover:var(--saffron-deep);
  --border:var(--line-on-bone); --border-strong:rgba(28,24,19,.22); --border-on-ink:var(--line-on-ink);
  /* type */
  --font-serif:'Cormorant Garamond',Georgia,serif;
  --font-sans:'Hanken Grotesk',ui-sans-serif,system-ui,sans-serif;
  --font-poster:'Anton','Hanken Grotesk',sans-serif;
  --font-display:var(--font-serif); --font-body:var(--font-sans);
  /* radius / shadow / motion */
  --radius-sm:8px; --radius-md:14px; --radius-lg:22px; --radius-xl:32px; --radius-pill:999px;
  --shadow-sm:0 2px 8px rgba(28,24,19,.07);
  --shadow-md:0 10px 30px -12px rgba(28,24,19,.18);
  --shadow-lg:0 26px 60px -22px rgba(28,24,19,.28);
  --ease-settle:cubic-bezier(.22,.61,.36,1); --ease-soft:cubic-bezier(.4,0,.2,1);
  --section-y:clamp(64px,9vw,112px);
  --maxw:1120px;
}

/* ── reset / base ─────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--surface-page); color:var(--text-body);
  font-family:var(--font-body); font-size:17px; line-height:1.5; font-weight:400;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img{display:block; max-width:100%; height:auto}
h1,h2,h3{font-family:var(--font-display); color:var(--text-strong); font-weight:500;
  line-height:1.04; letter-spacing:-.005em; margin:0 0 .5rem; text-wrap:balance}
p{margin:0 0 1rem; text-wrap:pretty}
a{color:var(--text-accent); text-decoration:none; transition:color .25s var(--ease-soft)}
a:hover{color:var(--accent-hover)}
strong{font-weight:600; color:var(--text-strong)}
em{font-style:italic}
::selection{background:var(--saffron-soft); color:var(--ink)}
:focus-visible{outline:2px solid var(--saffron); outline-offset:3px; border-radius:4px}

/* ── layout ───────────────────────────────────────────────────── */
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 24px}
.wrap-narrow{max-width:820px; margin:0 auto; padding:0 24px}
.section{padding:var(--section-y) 0}
.center{text-align:center}
.stack-sm>*+*{margin-top:.6rem}

/* bands */
.band-bone{background:var(--bone)}
.band-cream{background:var(--cream)}
.band-saffron{background:linear-gradient(180deg,var(--saffron-band),var(--saffron-wash))}
.band-ink{background:var(--ink); color:var(--text-on-ink)}
.band-ink h1,.band-ink h2,.band-ink h3{color:var(--bone)}

/* ── eyebrow + gold rule ──────────────────────────────────────── */
.eyebrow{display:inline-block; font-family:var(--font-body); font-size:13px; font-weight:600;
  letter-spacing:.22em; text-transform:uppercase; color:var(--text-accent)}
.eyebrow.on-ink{color:var(--saffron-soft)}
.gold-rule{width:56px; height:2px; background:var(--gold); border-radius:2px; border:0; margin:18px 0}
.center .gold-rule{margin-left:auto; margin-right:auto}
.eyebrow-rule{display:flex; flex-direction:column; align-items:flex-start; gap:14px}
.center .eyebrow-rule{align-items:center}
.eyebrow-rule .gold-rule{margin:0}

/* ── buttons ──────────────────────────────────────────────────── */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:.55em;
  font-family:var(--font-body); font-weight:600; letter-spacing:.04em; text-transform:uppercase;
  font-size:15px; line-height:1; white-space:nowrap; border-radius:var(--radius-pill);
  padding:.92rem 1.8rem; cursor:pointer; border:1px solid transparent;
  transition:transform .18s var(--ease-settle),background .3s var(--ease-soft),color .3s,box-shadow .3s;}
.btn:hover{transform:translateY(-1px)}
.btn:active{transform:scale(.97)}
.btn--lg{padding:1.08rem 2.2rem; font-size:16px}
.btn--sm{padding:.6rem 1.2rem; font-size:13px}
.btn--full{width:100%}
.btn--primary{background:var(--accent); color:#fff; box-shadow:var(--shadow-sm)}
.btn--primary:hover{background:var(--accent-hover); color:#fff}
.btn--gold{background:var(--gold); color:var(--ink); box-shadow:var(--shadow-sm)}
.btn--gold:hover{background:#ab8f3e; color:var(--ink)}
.btn--ghost{background:transparent; color:var(--text-accent); border-color:var(--border-strong)}
.btn--ghost:hover{background:var(--saffron-wash); color:var(--accent-hover)}
.btn--onink{background:var(--bone); color:var(--ink); box-shadow:var(--shadow-md)}
.btn--onink:hover{background:#fff; color:var(--ink)}
.btn--outline-ink{background:transparent; color:var(--bone); border-color:var(--border-on-ink)}
.btn--outline-ink:hover{background:rgba(245,238,224,.1); color:#fff}

/* ── badges ───────────────────────────────────────────────────── */
.badge{display:inline-flex; align-items:center; gap:.4em; padding:.36em .9em;
  font-family:var(--font-body); font-size:12px; font-weight:600; letter-spacing:.08em;
  text-transform:uppercase; border-radius:var(--radius-pill); line-height:1.2}
.badge--gold{background:var(--gold); color:var(--ink)}
.badge--saffron{background:rgba(201,123,44,.14); color:var(--saffron-deep)}
.badge--saffron-solid{background:var(--saffron); color:#fff}
.badge--terracotta{background:rgba(181,82,58,.14); color:var(--terracotta)}
.badge--ink{background:rgba(245,238,224,.12); color:var(--saffron-soft)}

/* ── cards ────────────────────────────────────────────────────── */
.card{position:relative; background:var(--surface-card); color:var(--text-body);
  border:1px solid var(--border); border-radius:var(--radius-lg); padding:2rem; overflow:hidden;
  box-shadow:var(--shadow-sm); transition:transform .32s var(--ease-settle),box-shadow .32s}
.card--interactive:hover{transform:translateY(-3px); box-shadow:var(--shadow-md)}
.card--accent::before{content:""; position:absolute; top:0; left:0; right:0; height:3px;
  background:linear-gradient(90deg,var(--saffron),var(--gold))}
.card--saffron{background:var(--saffron-wash); border-color:rgba(163,94,24,.2)}
.card--ink{background:var(--surface-ink-2); color:var(--text-on-ink); border-color:var(--border-on-ink); box-shadow:none}
.card-num{font-family:var(--font-display); font-style:italic; font-size:30px; color:var(--saffron-deep); line-height:1}
.card h3{font-size:24px; margin:12px 0 8px}
.card p{font-size:15.5px; line-height:1.6; color:var(--text-muted); margin:0}

/* ── grids ────────────────────────────────────────────────────── */
.grid{display:grid; gap:22px}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-2{grid-template-columns:repeat(2,1fr)}
.grid-auto{grid-template-columns:repeat(auto-fit,minmax(270px,1fr))}

/* ── testimonial ──────────────────────────────────────────────── */
.testimonial{margin:0; background:var(--surface-card); border:1px solid var(--border);
  border-radius:var(--radius-lg); padding:2.2rem; box-shadow:var(--shadow-sm);
  display:flex; flex-direction:column; gap:1.2rem; height:100%}
.testimonial .gold-rule{margin:0}
.testimonial blockquote{margin:0; font-family:var(--font-display); font-style:italic; font-weight:500;
  font-size:22px; line-height:1.32; color:var(--text-strong); text-wrap:pretty}
.testimonial figcaption{display:flex; align-items:center; gap:.7rem; margin-top:auto}
.testimonial .avatar{width:44px; height:44px; border-radius:50%; flex:none;
  background:var(--saffron); color:#fff; display:flex; align-items:center; justify-content:center;
  font-family:var(--font-display); font-size:20px; font-weight:600}
.testimonial .who{display:flex; flex-direction:column; line-height:1.3}
.testimonial .who b{font-family:var(--font-body); font-weight:600; font-size:15.5px; color:var(--text-strong)}
.testimonial .who span{font-family:var(--font-body); font-size:13px; letter-spacing:.04em; color:var(--text-muted)}
.testimonial--ink{background:var(--surface-ink-2); border-color:var(--border-on-ink); box-shadow:none}
.testimonial--ink blockquote{color:var(--bone)}
.testimonial--ink .who b{color:var(--bone)}
.testimonial--ink .who span{color:var(--text-on-ink-muted)}

/* ── forms ────────────────────────────────────────────────────── */
.field{display:flex; flex-direction:column; gap:.5rem; width:100%; text-align:left}
.field label{font-family:var(--font-body); font-size:14px; font-weight:600; color:var(--text-body)}
.input{width:100%; font-family:var(--font-body); font-size:16px; color:var(--text-strong);
  background:var(--surface-sunken); border:1px solid var(--border-strong); border-radius:var(--radius-md);
  padding:.9rem 1.1rem; outline:none; transition:border-color .25s,box-shadow .25s}
.input:focus{border-color:var(--accent); box-shadow:0 0 0 3px rgba(201,123,44,.16)}
.consent{display:flex; gap:.6rem; align-items:flex-start; font-size:13px; color:var(--text-muted); line-height:1.45}
.consent input{margin-top:3px; accent-color:var(--saffron)}
.form-note{font-size:13px; color:var(--text-faint); margin:.6rem 0 0}
.form-ok{font-family:var(--font-display); font-style:italic; color:var(--saffron-deep)}

/* ── header / nav ─────────────────────────────────────────────── */
.announce{background:var(--ink); color:var(--text-on-ink); font-family:var(--font-body); font-size:13.5px}
.announce a{color:var(--bone); text-decoration:underline; text-underline-offset:2px}
.announce-inner{max-width:var(--maxw); margin:0 auto; padding:9px 24px; display:flex; gap:8px 16px;
  align-items:center; justify-content:center; flex-wrap:wrap; text-align:center}
.announce .tag{color:var(--gold); font-weight:600; letter-spacing:.14em; text-transform:uppercase; font-size:11px}
.announce[hidden]{display:none}

.site-header{position:sticky; top:0; z-index:40}
.nav-bar{background:var(--veil-bone); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  border-bottom:1px solid var(--border)}
.nav-inner{max-width:var(--maxw); margin:0 auto; padding:13px 24px; display:flex; align-items:center;
  justify-content:space-between; gap:20px}
.brand{display:flex; align-items:center; gap:11px}
.brand img{width:38px; height:38px; border-radius:50%; object-fit:cover}
.brand span{font-family:var(--font-display); font-size:21px; font-weight:600; letter-spacing:.02em; color:var(--ink)}
.nav-links{display:flex; gap:20px; align-items:center}
.nav-links a{font-family:var(--font-body); font-size:13.5px; color:var(--text-body); white-space:nowrap}
.nav-links a:hover,.nav-links a[aria-current="page"]{color:var(--accent-hover)}
.nav-links a[aria-current="page"]{font-weight:600}
.nav-cta{margin-left:6px}
.nav-toggle{display:none; background:transparent; border:1px solid var(--border-strong); border-radius:10px;
  width:44px; height:40px; cursor:pointer; align-items:center; justify-content:center}
.nav-toggle span{display:block; width:20px; height:2px; background:var(--ink); position:relative}
.nav-toggle span::before,.nav-toggle span::after{content:""; position:absolute; left:0; width:20px; height:2px; background:var(--ink)}
.nav-toggle span::before{top:-6px} .nav-toggle span::after{top:6px}

/* ── hero ─────────────────────────────────────────────────────── */
.hero{position:relative; overflow:hidden; background:var(--ink)}
.hero-bg{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:.68}
.hero-veil{position:absolute; inset:0; background:linear-gradient(180deg,rgba(28,24,19,.34),rgba(28,24,19,.64))}
.hero-inner{position:relative; max-width:1080px; margin:0 auto; padding:clamp(96px,13vw,150px) 24px clamp(80px,10vw,120px); text-align:center}
.hero h1{font-family:var(--font-display); font-weight:500; font-size:clamp(42px,7vw,86px); line-height:1.02;
  color:var(--bone); max-width:15ch; margin:18px auto 0}
.hero h1 em{color:var(--saffron-soft)}
.hero-lead{font-size:18px; line-height:1.6; color:var(--text-on-ink-muted); max-width:46ch; margin:24px auto 34px}
.hero-actions{display:flex; gap:14px; justify-content:center; flex-wrap:wrap}

/* ── poster headline (Anton) ──────────────────────────────────── */
.poster{font-family:var(--font-poster); text-transform:uppercase; font-weight:400; line-height:.95;
  letter-spacing:.005em; font-size:clamp(40px,6.5vw,76px); margin:0}
.poster .hot{color:var(--saffron)}

/* ── split feature ────────────────────────────────────────────── */
.split{display:grid; grid-template-columns:1.05fr 1fr; align-items:stretch; gap:0}
.split-text{padding:var(--section-y) 48px var(--section-y) 0; display:flex; flex-direction:column; justify-content:center}
.split-media{position:relative; min-height:420px}
.split-media img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}

/* ── video facade (click-to-play) ─────────────────────────────── */
.video{position:relative; width:100%; aspect-ratio:16/9; border-radius:var(--radius-lg); overflow:hidden;
  background:var(--ink); cursor:pointer; border:0; padding:0; box-shadow:var(--shadow-md)}
.video img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:.92}
.video iframe{position:absolute; inset:0; width:100%; height:100%; border:0}
.video-play{position:absolute; inset:0; display:flex; align-items:center; justify-content:center}
.video-play::after{content:""; width:78px; height:78px; border-radius:50%; background:rgba(201,123,44,.92);
  box-shadow:0 8px 30px rgba(0,0,0,.4); clip-path:polygon(36% 28%,36% 72%,74% 50%);
  background-clip:padding-box; transition:transform .25s var(--ease-settle)}
.video:hover .video-play::after{transform:scale(1.08); background:var(--saffron)}
.video-label{position:absolute; left:0; right:0; bottom:0; padding:18px 20px; color:var(--bone);
  font-family:var(--font-body); font-size:14px; background:linear-gradient(0deg,rgba(28,24,19,.85),transparent)}

/* ── price / offer rows ───────────────────────────────────────── */
.offer{display:flex; flex-direction:column; gap:1rem}
.offer .price{font-family:var(--font-display); font-size:40px; color:var(--text-strong); line-height:1}
.offer .price small{font-family:var(--font-body); font-size:15px; color:var(--text-muted); letter-spacing:.02em}
.feature-list{list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:.8rem}
.feature-list li{display:flex; gap:.7rem; align-items:flex-start; font-size:16px; color:var(--text-body); line-height:1.5}
.feature-list li::before{content:""; flex:none; width:9px; height:9px; margin-top:8px; border-radius:50%;
  background:var(--gold); box-shadow:0 0 0 4px var(--gold-wash)}

/* ── lead / body prose ────────────────────────────────────────── */
.lead{font-size:20px; line-height:1.6; color:var(--text-body)}
.prose p{font-size:17px; line-height:1.72; color:var(--text-body); max-width:62ch}
.prose.center p{margin-left:auto; margin-right:auto}
.section-head{margin-bottom:48px}
.section-head h2{font-size:clamp(30px,4.5vw,48px); margin:14px 0 0}

/* ── footer ───────────────────────────────────────────────────── */
.site-footer{background:var(--ink-soft); color:var(--text-on-ink-muted); padding:56px 0 40px; font-size:14px}
.footer-grid{display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:32px; align-items:start}
.footer-brand img{width:40px; height:40px; border-radius:50%; object-fit:cover; margin-bottom:12px}
.footer-brand .nm{font-family:var(--font-display); font-size:22px; color:var(--bone); display:block; margin-bottom:8px}
.site-footer h4{font-family:var(--font-body); font-size:12px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--saffron-soft); margin:0 0 14px}
.site-footer ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:9px}
.site-footer a{color:var(--text-on-ink-muted)}
.site-footer a:hover{color:var(--bone)}
.footer-base{max-width:var(--maxw); margin:36px auto 0; padding:20px 24px 0; border-top:1px solid var(--border-on-ink);
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px; font-size:12.5px; color:var(--umber-soft)}

/* ── misc ─────────────────────────────────────────────────────── */
.note{font-size:13px; color:var(--text-faint)}
.kicker{font-family:var(--font-display); font-style:italic; font-size:clamp(24px,3vw,32px); color:var(--saffron-deep); line-height:1.3}
.pull{font-family:var(--font-display); font-size:clamp(26px,4vw,42px); line-height:1.18; color:var(--text-strong); text-wrap:balance}
.divider{height:1px; background:var(--border); border:0; margin:0}
.skip{position:absolute; left:-9999px}
.skip:focus{left:16px; top:10px; z-index:100; background:var(--bone); padding:8px 14px; border-radius:8px}

/* ── responsive ───────────────────────────────────────────────── */
@media (max-width:900px){
  .grid-3,.grid-2{grid-template-columns:1fr}
  .split{grid-template-columns:1fr}
  .split-text{padding:var(--section-y) 0 48px}
  .split-media{min-height:320px; order:-1}
  .footer-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:760px){
  .nav-links{position:absolute; top:100%; left:0; right:0; flex-direction:column; align-items:stretch;
    gap:0; background:var(--bone); border-bottom:1px solid var(--border); padding:8px 0;
    box-shadow:var(--shadow-md); display:none}
  .nav-links[data-open="true"]{display:flex}
  .nav-links a{padding:13px 24px; font-size:15px}
  .nav-links a:not(:last-child){border-bottom:1px solid var(--border)}
  .nav-cta{margin:8px 24px}
  .nav-toggle{display:inline-flex}
  .footer-grid{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001ms!important; transition-duration:.001ms!important}
}