/* ============================================================
   NIFLA — Swiss graphic-design studio
   ============================================================ */
:root{
  --bg:        #FAFAF8;
  --bg-2:      #FFFFFF;
  --grey:      #F0F0F0;
  --text:      #141414;
  --muted:     #6E6E6E;
  --muted-2:   #9B9B9B;
  --accent:    #6C3FC4;   /* used ONLY: logo dot, one CTA button, active nav underline */
  --accent-2:  #582FA6;
  --rule:      rgba(0,0,0,0.16);

  --container: 1280px;
  --pad-x: clamp(1.25rem, 5vw, 3.5rem);
  --section-y: clamp(6rem, 13vw, 13rem);

  --ease: cubic-bezier(.22,.7,.2,1);
  --ff: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --ff-serif: "Newsreader", Georgia, "Times New Roman", serif;
}

*{ box-sizing: border-box; margin:0; padding:0; }
html{ -webkit-text-size-adjust:100%; }
body{
  font-family: var(--ff);
  background: var(--bg);
  color: var(--text);
  line-height: 1.55;
  font-size: 18px;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
body.menu-open{ overflow:hidden; }
::selection{ background: var(--accent); color:#fff; }
a{ color:inherit; text-decoration:none; }
img{ max-width:100%; display:block; }

/* ---------- layout ---------- */
.container{ width:100%; max-width: var(--container); margin-inline:auto; padding-inline: var(--pad-x); }
.section{ padding-block: var(--section-y); }
.section--tight{ padding-block: clamp(4.5rem,9vw,8rem); }
.bg-2{ background: var(--bg-2); }

.eyebrow{
  display:inline-block; font-size:.76rem; font-weight:600; letter-spacing:.2em;
  text-transform:uppercase; color: var(--muted);
}

h1,h2,h3,h4{ line-height:1.02; letter-spacing:-0.035em; color: var(--text); font-weight:800; }
h2{ font-size: clamp(2.2rem, 5.5vw, 4.4rem); line-height:0.98; }
h3{ font-size: clamp(1.4rem, 2.6vw, 2rem); letter-spacing:-0.03em; }
p{ color: var(--muted); }

.section-head{ max-width: 22ch; margin-bottom: clamp(3rem,6vw,5rem); }
.section-head .eyebrow{ margin-bottom:1.6rem; }
.section-head p{ margin-top:1.5rem; max-width:46ch; font-size:1.1rem; font-weight:300; color: var(--text); }

/* ---------- links / buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.6rem;
  font-family: var(--ff); font-size:1rem; font-weight:600; letter-spacing:-0.01em;
  padding:1.05rem 1.9rem; border:1px solid transparent; cursor:pointer;
  transition: background .3s var(--ease), transform .3s var(--ease);
  white-space:nowrap;
}
.btn svg{ width:18px; height:18px; }
.btn--lg{ padding:1.2rem 2.2rem; font-size:1.05rem; }
.btn--violet{ background: var(--accent); color:#fff; }
.btn--violet:hover{ background: var(--accent-2); transform: translateY(-2px); }
.btn--dark{ background: var(--text); color:#fff; }
.btn--dark:hover{ background:#000; transform: translateY(-2px); }

.tlink{
  display:inline-flex; align-items:center; gap:.55rem; font-weight:500; color: var(--text);
  border-bottom:1px solid var(--text); padding-bottom:3px;
  transition: gap .3s var(--ease);
}
.tlink svg{ width:17px; height:17px; transition: transform .3s var(--ease); }
.tlink:hover{ gap:.85rem; }
.tlink:hover svg{ transform: translateX(4px); }
.tlink--lg{ font-size: clamp(1.15rem,2.2vw,1.5rem); font-weight:600; letter-spacing:-0.02em; padding-bottom:5px; }

/* ---------- header ---------- */
.header{ position:fixed; inset:0 0 auto 0; z-index:100; transition: background .35s var(--ease), border-color .35s var(--ease); border-bottom:1px solid transparent; }
.header.scrolled{ background: rgba(250,250,248,0.86); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom-color: var(--rule); }
.header__inner{ display:flex; align-items:center; justify-content:space-between; height:80px; }
.brand{ font-weight:900; font-size:1.65rem; letter-spacing:-0.05em; color: var(--text); }
.brand .dot{ color: var(--accent); }
.nav{ display:flex; align-items:center; gap:2.6rem; }
.nav__links{ display:flex; align-items:center; gap:2.1rem; }
.nav__link{ font-size:.86rem; font-weight:300; color: var(--text); position:relative; padding:.5rem 0; cursor:pointer; transition: opacity .3s var(--ease); }
.nav__link:hover{ opacity:.55; }
.nav__link.active{ font-weight:500; }
.nav__link.active::after{ content:""; position:absolute; left:0; right:0; bottom:.1rem; height:2px; background: var(--accent); }
.nav__cta{ font-size:.9rem; font-weight:500; color: var(--text); border-bottom:1.5px solid var(--text); padding-bottom:2px; cursor:pointer; transition: opacity .3s var(--ease); }
.nav__cta:hover{ opacity:.55; }

.burger{ display:none; width:46px; height:46px; border:1px solid var(--text); background:transparent; cursor:pointer; align-items:center; justify-content:center; flex-direction:column; gap:5px; }
.burger span{ width:18px; height:2px; background: var(--text); transition: transform .3s var(--ease), opacity .3s var(--ease); }
body.menu-open .burger span:nth-child(1){ transform: translateY(7px) rotate(45deg); }
body.menu-open .burger span:nth-child(2){ opacity:0; }
body.menu-open .burger span:nth-child(3){ transform: translateY(-7px) rotate(-45deg); }
body.menu-open .header{ background: var(--bg); border-bottom-color: var(--rule); }

.mobile-menu{ position:fixed; inset:0; z-index:90; background: var(--bg); display:flex; flex-direction:column; justify-content:center; padding: calc(81px + clamp(1.5rem,5vw,2.5rem)) var(--pad-x) clamp(1.75rem,6vw,2.75rem); transform: translateY(-100%); transition: transform .45s var(--ease); visibility:hidden; overflow-y:auto; }
body.menu-open .mobile-menu{ transform: translateY(0); visibility:visible; }
.mobile-menu a{ font-size: clamp(2.2rem,9vw,3.4rem); font-weight:800; letter-spacing:-0.045em; line-height:1.08; padding:.3rem 0; color: var(--text); cursor:pointer; }
.mobile-menu a:nth-child(even){ font-weight:300; }
.mobile-menu .mm-cta{ margin-top:2rem; font-size:1.2rem; font-weight:500; border-bottom:1.5px solid var(--text); display:inline-block; width:max-content; }
.mobile-menu .mm-legal{ margin-top:auto; display:flex; gap:1.8rem; padding-top:2.5rem; }
.mobile-menu .mm-legal a{ font-size:.95rem; font-weight:400; color: var(--muted); }

/* ---------- pages + fade ---------- */
main{ padding-top:80px; }
.page{ display:block; }
@media (prefers-reduced-motion: no-preference){
  html.reveal-on .page{ animation: pageIn .5s var(--ease); }
  @keyframes pageIn{ from{ opacity:0; transform: translateY(10px);} to{ opacity:1; transform:none; } }
}

/* ---------- hero (massive type, asymmetric) ---------- */
.hero{ min-height: min(88vh, 920px); display:flex; padding-block: clamp(2.5rem,5vw,4.5rem) clamp(3rem,6vw,5rem); }
.hero .container{ display:flex; flex-direction:column; width:100%; }
.hero__title{ display:flex; flex-direction:column; font-size: clamp(3.1rem, 11.5vw, 6.2rem); line-height:0.9; letter-spacing:-0.05em; }
.hero__title .t-thin{ font-weight:300; }
.hero__title .t-fat{ font-weight:900; }
.hero__foot{ margin-top:auto; padding-top: clamp(3rem,9vw,7rem); max-width: 540px; margin-left:auto; }
.hero__sub{ font-weight:300; font-size: clamp(1.15rem,1.8vw,1.45rem); line-height:1.5; color: var(--text); }
.hero__cta{ display:flex; flex-wrap:wrap; align-items:center; gap:1.6rem; margin-top:2.2rem; }

/* ---------- benefits (horizontal, text-only, vertical rules) ---------- */
.benefits{ display:grid; grid-template-columns: repeat(3,1fr); }
.benefit{ padding: 0 clamp(1.5rem,3vw,2.6rem); border-left:1px solid var(--rule); }
.benefit:first-child{ padding-left:0; border-left:none; }
.benefit h3{ font-weight:800; margin-bottom:.7rem; }
.benefit p{ font-size:.98rem; font-weight:300; color: var(--text); line-height:1.55; max-width: 24ch; }

/* ---------- values ---------- */
.values{ display:grid; grid-template-columns: repeat(3,1fr); gap:0; }
.value{ padding: 1.8rem clamp(1.4rem,3vw,2.6rem) 0; border-top:1px solid var(--text); }
.value:first-child{ padding-left:0; }
.value .vp-num{ font-size:.82rem; font-weight:700; color: var(--muted); letter-spacing:.08em; }
.value h3{ margin:1.2rem 0 .7rem; }
.value p{ font-size:1rem; font-weight:300; color: var(--text); line-height:1.6; }

/* ---------- CTA (left, type-led) ---------- */
.cta{ border-top:1px solid var(--rule); padding-top: clamp(3rem,7vw,5.5rem); }
.cta h2{ max-width: 15ch; }
.cta p{ margin:1.4rem 0 2.4rem; max-width:42ch; font-size:1.1rem; font-weight:300; color: var(--text); }

/* ---------- accordion ---------- */
.acc{ border-top:1px solid var(--rule); }
.acc-item{ border-bottom:1px solid var(--rule); }
.acc-head{
  display:flex; align-items:center; justify-content:space-between; gap:2rem; width:100%;
  padding: clamp(1.7rem,3.5vw,2.7rem) 0;
  background:none; border:none; cursor:pointer; text-align:left; font-family: var(--ff);
}
.acc-left{ display:flex; flex-direction:column; gap:.45rem; }
.acc-name{ font-size: clamp(1.6rem,3.6vw,2.6rem); font-weight:800; letter-spacing:-0.035em; line-height:1; color: var(--text); }
.acc-price{ font-size:1rem; font-weight:400; color: var(--muted); }
.acc-line{ width:30px; height:2px; background: var(--text); flex:none; transition: width .42s var(--ease); }
.acc-head:hover .acc-line{ width:56px; }
.acc-item.open .acc-line{ width:100px; }
.acc-bodywrap{ display:grid; grid-template-rows:0fr; transition: grid-template-rows .42s var(--ease); }
.acc-item.open .acc-bodywrap{ grid-template-rows:1fr; }
.acc-body{ overflow:hidden; }
.acc-body-inner{
  background: var(--grey); padding: clamp(1.8rem,3.2vw,2.8rem);
  margin-bottom: clamp(1.8rem,3.5vw,2.6rem);
  display:grid; grid-template-columns: 1.1fr 1fr; gap: clamp(1.6rem,4vw,3.5rem);
}
.acc-body-inner .lede{ font-size:1.15rem; line-height:1.5; color: var(--text); font-weight:400; }
.acc-detail{ display:flex; flex-direction:column; gap:1.3rem; }
.acc-detail .blk h4{ font-size:.76rem; text-transform:uppercase; letter-spacing:.13em; color: var(--muted); margin-bottom:.45rem; font-weight:700; }
.acc-detail .blk p{ font-size:1rem; color: var(--text); font-weight:300; }
.price-note{ margin-top:2.6rem; font-size:.95rem; color: var(--muted-2); font-weight:300; }

/* ---------- pricing cards ---------- */
.lp-head{ display:grid; grid-template-columns: 1.1fr 1fr; gap: clamp(2rem,6vw,5rem); align-items:end; margin-bottom: clamp(3rem,6vw,5rem); }
.lp-head__title{ max-width: 16ch; }
.lp-head__title .eyebrow{ display:block; margin-bottom:1.6rem; }
.lp-head__text{ font-size:1.1rem; font-weight:300; color: var(--text); line-height:1.6; max-width:46ch; padding-bottom:.4rem; }
@media (max-width:760px){
  .lp-head{ grid-template-columns:1fr; gap:1.5rem; align-items:start; }
}
.pricing{ display:grid; grid-template-columns: 1fr; gap: clamp(1.4rem,2.5vw,2rem); align-items:start; }
.pcard{
  position:relative; border:1px solid var(--rule); background: var(--bg-2);
  padding: clamp(2rem,3.6vw,3.2rem) clamp(1.7rem,3vw,2.8rem);
  display:flex; flex-direction:column;
}
.pcard--dark{ background: var(--text); border-color: var(--text); color:#fff; }
.pcard--dark p, .pcard--dark .p-sub, .pcard--dark .p-feat li{ color: rgba(255,255,255,0.82); }
.pcard__badge{
  position:absolute; top:-14px; left: clamp(1.7rem,3vw,2.8rem);
  display:inline-flex; align-items:center; gap:.4rem;
  background: var(--bg-2); border:1px solid var(--text);
  font-size:.7rem; font-weight:600; letter-spacing:.16em; text-transform:uppercase;
  padding:.5rem .9rem; border-radius:100px; color: var(--text);
}
.p-eyebrow{ font-size:.74rem; font-weight:600; letter-spacing:.22em; text-transform:uppercase; color: var(--muted); }
.pcard--dark .p-eyebrow{ color: rgba(255,255,255,0.55); }
.p-name{ font-family: var(--ff-serif); font-size: clamp(1.9rem,3.4vw,2.6rem); font-weight:400; letter-spacing:-0.01em; line-height:1.05; margin: 1.3rem 0 1.4rem; color: var(--text); }
.pcard--dark .p-name{ color:#fff; }
.p-price{ display:flex; align-items:baseline; gap:.5rem; font-family: var(--ff-serif); }
.p-price .cur{ font-size: clamp(1rem,1.4vw,1.25rem); font-weight:400; color: var(--muted); letter-spacing:.02em; white-space:nowrap; }
.pcard--dark .p-price .cur{ color: rgba(255,255,255,0.5); }
.p-price .amt{ font-size: clamp(3.4rem,6vw,5rem); font-weight:400; line-height:.9; letter-spacing:-0.01em; color: var(--text); }
.pcard--dark .p-price .amt{ color:#fff; }
.p-sub{ font-family: var(--ff-serif); font-style:italic; font-size: clamp(1.05rem,1.6vw,1.25rem); line-height:1.45; color: var(--muted); margin: 1.2rem 0 0; max-width: 34ch; }
.p-pill{
  display:inline-flex; align-items:center; align-self:flex-start; gap:.5rem; margin-top:1.6rem;
  font-size:.78rem; font-weight:500; letter-spacing:.02em;
  padding:.55rem 1rem; border-radius:100px; border:1px solid rgba(255,255,255,0.3); color:#fff;
}
.p-feat{ list-style:none; margin: clamp(1.8rem,3vw,2.4rem) 0 0; display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap:.95rem clamp(2rem,4vw,4rem); }
.p-feat li{ position:relative; padding-left:1.7rem; font-size:1rem; font-weight:300; line-height:1.45; color: var(--text); }
.p-feat li::before{ content:"+"; position:absolute; left:0; top:-1px; font-weight:500; color: var(--muted); }
.pcard--dark .p-feat li::before{ color: rgba(255,255,255,0.55); }
.p-cta{ margin-top: clamp(2.2rem,4vw,3.2rem); }
.pcard .btn--out{ border:1px solid var(--text); color: var(--text); background:transparent; border-radius:100px; }
.pcard .btn--out:hover{ background: var(--text); color:#fff; transform: translateY(-2px); }
.pcard--dark .btn--out{ border-color:#fff; color: var(--text); background:#fff; }
.pcard--dark .btn--out:hover{ background: rgba(255,255,255,0.88); }

/* ---------- add-ons ---------- */
.addons{ margin-top: clamp(3rem,6vw,5rem); border-top:1px solid var(--text); padding-top: clamp(2rem,3.5vw,3rem); }
.addons__head{ font-size:.76rem; font-weight:600; letter-spacing:.2em; text-transform:uppercase; color: var(--muted); margin-bottom: clamp(1.6rem,3vw,2.4rem); }
.addon-grid{ display:grid; grid-template-columns: repeat(3,1fr); gap:0; }
.addon{ padding: 0 clamp(1.5rem,3vw,2.6rem); border-left:1px solid var(--rule); }
.addon:first-child{ padding-left:0; border-left:none; }
.addon__name{ font-family: var(--ff-serif); font-size: clamp(1.4rem,2.4vw,1.85rem); font-weight:400; letter-spacing:-0.01em; line-height:1.1; }
.addon__price{ font-size:.95rem; font-weight:500; color: var(--text); margin:.7rem 0 .9rem; }
.addon__price .per{ color: var(--muted); font-weight:300; }
.addon__desc{ font-size:.96rem; font-weight:300; line-height:1.55; color: var(--muted); max-width: 26ch; }

/* ---------- about (asymmetric) ---------- */
.about-grid{ display:grid; grid-template-columns: minmax(0,0.8fr) minmax(0,1.2fr); gap: clamp(2rem,7vw,6rem); align-items:start; }
.about-lead{ font-size: clamp(1.6rem,3vw,2.4rem); font-weight:800; letter-spacing:-0.035em; line-height:1.05; max-width: 14ch; }
.about-body p{ font-size:1.2rem; line-height:1.85; color: var(--text); font-weight:300; }
.about-body p + p{ margin-top:1.9rem; }
.about-body p.muted{ color: var(--muted); }
.about-values{ display:grid; grid-template-columns: repeat(3,1fr); gap:0; margin-top: clamp(4.5rem,9vw,7rem); }
.about-value{ padding: 1.8rem clamp(1.4rem,3vw,2.4rem) 0; border-top:1px solid var(--text); }
.about-value:first-child{ padding-left:0; }
.about-value h4{ font-size:1.2rem; margin-bottom:.5rem; letter-spacing:-0.02em; font-weight:800; }
.about-value p{ font-size:1rem; font-weight:300; color: var(--text); }

/* ---------- about: brothers intro + photo ---------- */
.about-top{ display:grid; grid-template-columns: minmax(0,1fr) minmax(0,0.85fr); gap: clamp(2.5rem,6vw,5.5rem); align-items:center; }
.about-intro{ max-width: 42ch; }
.about-title{ font-size: clamp(2.6rem,7vw,5rem); line-height:0.95; letter-spacing:-0.045em; }
.about-title .t-thin{ font-weight:300; }
.about-title .t-fat{ font-weight:900; }
.about-text{ margin-top: clamp(1.6rem,3vw,2.2rem); font-size: clamp(1.15rem,1.9vw,1.45rem); font-weight:300; line-height:1.6; color: var(--text); }
.about-photo{ margin:0; max-width:440px; justify-self:end; }
.about-photo img{ width:100%; border-radius:20px; display:block; }
.about-photo figcaption{ margin-top:1rem; text-align:center; font-size:.88rem; color: var(--muted); font-weight:300; }

/* ---------- contact ---------- */
.contact-wa{ margin-bottom: 0; }
.contact-actions{ margin-top: clamp(2.5rem,5vw,3.5rem); border-top:1px solid var(--rule); }
.contact-line{ display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between; gap:1rem 2rem; padding: clamp(1.6rem,3vw,2.2rem) 0; border-bottom:1px solid var(--rule); }
.contact-line .cl-label{ font-size:.76rem; font-weight:600; letter-spacing:.18em; text-transform:uppercase; color: var(--muted); }
.contact-line .cl-value{ font-size: clamp(1.6rem,4.5vw,2.6rem); font-weight:800; letter-spacing:-0.035em; color: var(--text); transition: opacity .3s var(--ease); }
a.contact-line:hover .cl-value{ opacity:.55; }

/* ---------- legal ---------- */
.legal{ max-width:760px; }
.legal h1{ font-size: clamp(2.6rem,6vw,4rem); font-weight:900; letter-spacing:-0.04em; }
.legal .legal-meta{ color: var(--muted); margin-top:.8rem; font-weight:300; }
.legal h2{ font-size:1.4rem; margin:2.8rem 0 .8rem; letter-spacing:-0.02em; font-weight:800; }
.legal p, .legal li{ color: var(--muted); font-size:1rem; line-height:1.75; font-weight:300; }
.legal p + p{ margin-top:.7rem; }
.legal ul{ margin:.7rem 0 0 1.1rem; display:flex; flex-direction:column; gap:.45rem; }
.legal address{ font-style:normal; color: var(--text); line-height:1.9; font-weight:300; }
.legal address strong{ font-weight:700; }
.legal a{ color: var(--text); border-bottom:1px solid var(--rule); }
.legal a:hover{ border-color: var(--text); }
.legal .legal-block{ margin-top:1.4rem; }

/* ---------- footer ---------- */
.footer{ padding-block: clamp(6rem,13vw,11rem) clamp(2rem,4vw,3rem); border-top:1px solid var(--rule); }
.footer__inner{ display:flex; flex-wrap:wrap; gap:1rem 2rem; justify-content:space-between; align-items:center; }
.footer span, .footer a{ font-size:.8rem; color: var(--muted); font-weight:400; }
.footer__links{ display:flex; gap:1.8rem; }
.footer a{ cursor:pointer; transition: color .3s var(--ease); }
.footer a:hover{ color: var(--text); }

/* ---------- reveal ---------- */
@media (prefers-reduced-motion: no-preference){
  html.reveal-on [data-reveal]{ opacity:0; }
  html.reveal-on [data-reveal].in{ animation: revealUp .7s var(--ease) both; }
  @keyframes revealUp{ from{ opacity:0; transform: translateY(20px); } to{ opacity:1; transform:none; } }
}

/* ---------- responsive ---------- */
@media (max-width: 920px){
  .nav__links, .nav__cta{ display:none; }
  .burger{ display:flex; }
  .values, .about-values{ grid-template-columns:1fr; }
  .value, .about-value{ padding-left:0; padding-right:0; }
  .benefits{ grid-template-columns:1fr; }
  .benefit{ padding:1.6rem 0 0; border-left:none; border-top:1px solid var(--rule); }
  .benefit:first-child{ padding-top:0; border-top:none; }
  .about-top{ grid-template-columns:1fr; gap: clamp(2rem,7vw,3rem); }
  .about-photo{ justify-self:stretch; max-width:440px; }
  .about-grid{ grid-template-columns:1fr; gap:2.2rem; }
  .acc-body-inner{ grid-template-columns:1fr; gap:1.5rem; }
  .p-feat{ grid-template-columns:1fr; }
  .addon-grid{ grid-template-columns:1fr; gap:1.8rem; }
  .addon{ padding:0; border-left:none; }
  .hero__foot{ margin-left:0; max-width:40ch; }
}
@media (max-width: 560px){
  .hero__cta .btn{ width:100%; }
}