/* ============================================================
   NICODE — Design System
   Editorial × Quiet Luxury × Psychology × Intellectual × Human
   Colour: soft black / warm white / stone grey / taupe / champagne
   Type: editorial serif (Fraunces) + clean sans (Inter)
   ============================================================ */

:root{
  --soft-black: #1B1A18;
  --warm-white: #FAF7F2;
  --paper: #F4EFE7;
  --stone: #8C8680;
  --stone-light: #B8B2AA;
  --taupe: #A88B71;
  --taupe-dark: #6B5A46;
  --champagne: #D8C6A8;
  --divider: #E2DACB;
  --text-body: #33302B;

  --font-serif: 'Fraunces', Georgia, 'Times New Roman', serif;
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --container: 1120px;
  --gutter: clamp(24px, 6vw, 96px);
}

*{ box-sizing: border-box; margin: 0; padding: 0; }

html{ scroll-behavior: smooth; }

body{
  font-family: var(--font-sans);
  background: var(--warm-white);
  color: var(--text-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img{ max-width: 100%; display: block; }
a{ color: inherit; text-decoration: none; }

.wrap{
  max-width: var(--container);
  margin: 0 auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}

.eyebrow{
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--taupe-dark);
}

.serif{ font-family: var(--font-serif); }

h1,h2,h3{
  font-family: var(--font-serif);
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--soft-black);
}

.rule{
  width: 48px;
  height: 1px;
  background: var(--taupe);
  border: none;
  margin: 28px 0;
}

.rule-center{ margin-left: auto; margin-right: auto; }

/* ---------------- Header ---------------- */

.site-header{
  position: sticky; top: 0; z-index: 50;
  background: rgba(250,247,242,0.92);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--divider);
}

.site-header .wrap{
  display: flex; align-items: center; justify-content: space-between;
  height: 84px;
}

.wordmark{
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 19px;
  letter-spacing: 0.28em;
  color: var(--soft-black);
  display: inline-flex;
  align-items: center;
}

.logo-img{ height: 52px; width: auto; display: block; }

.nav-links{
  display: flex; gap: 40px;
  font-size: 14px; letter-spacing: 0.03em;
}

.nav-links a{ color: var(--taupe-dark); transition: color .2s; }
.nav-links a:hover{ color: var(--soft-black); }

.nav-cta{
  border: 1px solid var(--soft-black);
  padding: 10px 22px;
  font-size: 13px;
  letter-spacing: 0.05em;
  white-space: nowrap;
}
.nav-cta:hover{ background: var(--soft-black); color: var(--warm-white); }

.header-right{ display: flex; align-items: center; gap: 18px; }

.lang-switch{
  display: inline-flex; align-items: center;
  border: 1px solid var(--divider);
  border-radius: 999px;
  padding: 3px;
  gap: 2px;
}
.lang-switch button{
  font-family: var(--font-sans); font-weight: 600; font-size: 12px; letter-spacing: 0.04em;
  padding: 6px 14px;
  border: none; border-radius: 999px;
  background: transparent; color: var(--stone);
  cursor: pointer;
  transition: background .2s, color .2s;
}
.lang-switch button.active{ background: var(--soft-black); color: var(--champagne); }

.nav-toggle{ display: none; }

/* ---------------- Hero ---------------- */

.hero{
  padding: clamp(80px, 14vw, 160px) 0 clamp(60px, 10vw, 120px);
}

.hero .eyebrow{ display: block; margin-bottom: 28px; }

.hero h1{
  font-size: clamp(40px, 6.4vw, 84px);
  line-height: 1.04;
  letter-spacing: -0.015em;
}

.hero .cn-line{
  font-family: var(--font-serif);
  font-size: clamp(20px, 2.4vw, 28px);
  color: var(--taupe-dark);
  margin-top: 26px;
  max-width: 720px;
  line-height: 1.55;
}

.hero .lede{
  margin-top: 40px;
  max-width: 560px;
  font-size: 16px;
  color: var(--stone);
}

.hero-actions{
  margin-top: 44px;
  display: flex; gap: 20px; align-items: center; flex-wrap: wrap;
}

.btn{
  display: inline-block;
  padding: 15px 32px;
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border: 1px solid var(--soft-black);
}
.btn-primary{ background: var(--soft-black); color: var(--warm-white); }
.btn-primary:hover{ background: var(--taupe-dark); border-color: var(--taupe-dark); }
.btn-ghost{ color: var(--soft-black); }
.btn-ghost:hover{ border-color: var(--taupe); color: var(--taupe-dark); }

/* ---------------- Section shell ---------------- */

section{ padding: clamp(64px, 10vw, 120px) 0; }
.section-alt{ background: var(--paper); }
.section-dark{ background: var(--soft-black); color: var(--warm-white); }
.section-dark h2, .section-dark h3{ color: var(--warm-white); }
.section-dark .eyebrow{ color: var(--champagne); }
.section-dark .stone-text{ color: var(--stone-light); }

.section-head{ max-width: 640px; margin-bottom: 56px; }
.section-head h2{ font-size: clamp(30px, 3.6vw, 44px); margin-top: 14px; }
.section-head p{ margin-top: 18px; color: var(--stone); font-size: 16px; }

/* ---------------- Positioning ---------------- */

.positioning-grid{
  display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: start;
}

.positioning-copy p{ margin-bottom: 20px; font-size: 16.5px; color: var(--text-body); }
.positioning-copy p.cn{ font-family: var(--font-serif); font-size: 19px; color: var(--taupe-dark); }

.not-list{ list-style: none; }
.not-list li{
  padding: 14px 0;
  border-bottom: 1px solid var(--divider);
  font-size: 14.5px;
  color: var(--stone);
  display: flex; gap: 12px;
}
.not-list li span.x{ color: var(--taupe); font-family: var(--font-serif); font-style: italic; }

/* ---------------- Framework ----------------
   Grid, not flex-wrap: a wrapped flex row orphans the last arrow onto its
   own line when the row breaks mid-sequence. Grid reflows by explicit
   column count per breakpoint instead, so arrows never separate from the
   step they point to. Arrows are generated content, not separate elements,
   and are hidden at the end of each row via :nth-child. */

.framework-grid{
  display: grid;
  /* max-content floor, not a bare 1fr: EMOTIONAL RESPONSE is unbreakable (see
     the nbsp note on the markup) and forcing it into an equal-width column
     let it visually overflow its own box while the arrow stayed anchored to
     the box's (too-narrow) edge -- box and glyphs disagreeing is what put
     the arrow mid-word. Sizing each column to its own content removes the
     mismatch entirely instead of trying to re-aim the arrow at it. */
  grid-template-columns: repeat(6, minmax(max-content, 1fr));
  column-gap: 44px; row-gap: 56px;
  margin-top: 56px;
}

.framework-step{
  display: flex; flex-direction: column; align-items: center; text-align: center;
  min-width: 0; /* without this, a grid item's implicit min-width is its content's
                   min-content size, which silently overrides minmax(0,1fr) and
                   forces columns wider than intended -- the actual cause of the
                   arrow/text collisions, not the arrow positioning itself */
}

.framework-step .en{
  position: relative;
  display: inline-block;
  max-width: 100%;
  font-family: var(--font-sans); font-weight: 600; font-size: 12.5px;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--warm-white);
}
.framework-step .cn{
  font-family: var(--font-serif); font-size: 14px; color: var(--champagne); margin-top: 6px;
}

/* Arrow anchors to the EN label's own box (not the taller step column), so it
   stays vertically centered on that line no matter how the label wraps, and
   sits in the reserved column-gap so it can never overlap neighbouring text. */
.framework-step:not(:last-child) .en::after{
  content: '→';
  position: absolute;
  top: 50%; left: 100%;
  transform: translate(15px, -50%);
  color: var(--taupe);
  font-family: var(--font-serif);
  font-size: 16px;
  white-space: nowrap;
}

@media (max-width: 860px){
  .framework-grid{ grid-template-columns: repeat(3, 1fr); column-gap: 28px; row-gap: 44px; }
  .framework-step:nth-child(3n) .en::after{ content: none; }
}

@media (max-width: 560px){
  .framework-grid{ grid-template-columns: 1fr; row-gap: 40px; }
  .framework-step:not(:last-child) .en::after{
    content: '↓';
    top: 100%; left: 50%; right: auto;
    transform: translate(-50%, 14px);
  }
}

/* ---------------- Human / credibility ---------------- */

.credibility-grid{
  display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 72px; align-items: center;
}

.photo-placeholder{
  aspect-ratio: 4/5;
  border: 1px dashed var(--stone-light);
  background: var(--paper);
  display: flex; align-items: center; justify-content: center;
  text-align: center; padding: 24px;
  font-size: 12.5px; color: var(--stone); letter-spacing: 0.04em;
}

.stat-row{
  display: flex; gap: 48px; margin-top: 40px; flex-wrap: wrap;
}
.stat{ min-width: 120px; }
.stat .num{ font-family: var(--font-serif); font-size: 36px; color: var(--soft-black); }
.stat .label{ font-size: 12.5px; color: var(--stone); margin-top: 4px; letter-spacing: 0.03em; }

/* ---------------- Offers ---------------- */

.offer-grid{
  display: grid; grid-template-columns: 1fr 1fr; gap: 32px;
}

.offer-card{
  border: 1px solid var(--divider);
  background: var(--warm-white);
  padding: 44px 40px;
}
.offer-card.featured{ border-color: var(--taupe); background: var(--soft-black); color: var(--warm-white); }
.offer-card.featured h3, .offer-card.featured .price{ color: var(--warm-white); }
.offer-card.featured .desc{ color: var(--stone-light); }
.offer-card.featured .eyebrow{ color: var(--champagne); }

.offer-card h3{ font-size: 24px; margin-top: 10px; }
.offer-card .price{
  font-family: var(--font-serif); font-size: 40px; margin-top: 18px; color: var(--soft-black);
}
.offer-card .price sup{ font-size: 16px; font-family: var(--font-sans); }
.offer-card .price.price-note{ font-size: 19px; font-family: var(--font-sans); font-weight: 500; color: var(--stone); }
.offer-card.featured .price.price-note{ color: var(--stone-light); }
.offer-card .desc{ margin-top: 16px; font-size: 14.5px; color: var(--stone); line-height: 1.7; }
.offer-card ul{ list-style: none; margin-top: 22px; }
.offer-card li{ padding: 14px 0; border-top: 1px solid var(--divider); }
.offer-card.featured li{ border-top-color: rgba(255,255,255,0.12); }
.offer-card li .phase-label{ font-size: 14px; font-weight: 600; color: var(--soft-black); }
.offer-card.featured li .phase-label{ color: var(--warm-white); }
.offer-card li .phase-desc{ display: block; margin-top: 5px; font-size: 13px; line-height: 1.55; color: var(--stone); }
.offer-card.featured li .phase-desc{ color: var(--stone-light); }
.offer-card .btn{ margin-top: 28px; width: 100%; text-align: center; }

/* ---------------- FAQ (2-column accordion) ---------------- */

.faq-grid{
  max-width: 720px;
}

.faq-item{
  border-bottom: 1px solid var(--divider);
}

.faq-item summary{
  padding: 22px 0;
  font-family: var(--font-serif); font-size: 18px; color: var(--soft-black);
  cursor: pointer;
  list-style: none;
  display: flex; align-items: flex-start; justify-content: space-between; gap: 16px;
}
.faq-item summary::-webkit-details-marker{ display: none; }

.faq-item summary::after{
  content: '+';
  flex-shrink: 0;
  font-family: var(--font-sans); font-size: 20px; font-weight: 400;
  color: var(--taupe); line-height: 1.1;
  transition: transform .2s;
}
.faq-item[open] summary::after{ content: '−'; }

.faq-item .a{ padding: 0 0 24px; font-size: 14.5px; line-height: 1.7; color: var(--stone); }

/* ---------------- Perspectives / articles ---------------- */

.perspectives-list{
  display: grid;
  border-top: 1px solid var(--divider);
}
.perspectives-card{
  display: block;
  padding: 32px 0;
  border-bottom: 1px solid var(--divider);
  transition: background .2s;
}
.perspectives-card:hover{ background: var(--paper); }
.perspectives-card .meta{
  display: block;
  font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--taupe-dark);
}
.perspectives-card h3{
  font-size: clamp(20px, 2.4vw, 26px); line-height: 1.28;
  margin: 12px 0 10px;
}
.perspectives-card p{
  font-size: 14.5px; line-height: 1.7; color: var(--stone); max-width: 640px;
}
.perspectives-all{ margin-top: 40px; }

/* ---------------- Watch / video ---------------- */

.video-grid{
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 18px;
  margin-top: 48px;
}

.video-card{ margin: 0; }

.video-embed{
  position: relative;
  aspect-ratio: 9 / 16;
  overflow: hidden;
  background: var(--soft-black);
  border: 1px solid var(--divider);
}

.video-embed .video-frame,
.video-embed iframe{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

.video-embed--placeholder{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 18px;
  text-align: center;
}
.video-embed--placeholder .play{
  width: 52px; height: 52px;
  border-radius: 999px;
  border: 1px solid var(--stone);
  display: flex; align-items: center; justify-content: center;
  font-size: 16px;
  color: var(--champagne);
  padding-left: 3px;
}
.video-embed--placeholder .ph-label{
  font-size: 11.5px;
  letter-spacing: 0.04em;
  color: var(--stone-light);
  line-height: 1.5;
}

.video-card figcaption{
  margin-top: 12px;
  font-size: 13px;
  color: var(--stone);
  line-height: 1.5;
}

.watch-all{ margin-top: 40px; }

@media (max-width: 1024px){
  .video-grid{ grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 600px){
  .video-grid{ grid-template-columns: repeat(2, 1fr); gap: 14px; }
}

/* ---------------- Footer ---------------- */

.site-footer{
  background: var(--soft-black); color: var(--stone-light);
  padding: 72px 0 36px;
}
.footer-grid{ display: flex; justify-content: space-between; flex-wrap: wrap; gap: 40px; }
.footer-wordmark{ color: var(--warm-white); font-family: var(--font-sans); letter-spacing: 0.28em; font-weight: 700; font-size: 17px; }
.footer-wordmark .logo-img{ height: 46px; }
.footer-cn{ font-family: var(--font-serif); color: var(--champagne); margin-top: 14px; max-width: 320px; font-size: 15px; }
.footer-links{ display: flex; gap: 60px; flex-wrap: wrap; }
.footer-col h4{ font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--stone); margin-bottom: 14px; }
.footer-col a{ display: block; font-size: 14px; padding: 5px 0; color: var(--stone-light); }
.footer-col a:hover{ color: var(--champagne); }
.footer-bottom{
  margin-top: 56px; padding-top: 24px; border-top: 1px solid rgba(255,255,255,0.1);
  font-size: 12px; color: var(--stone); display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px;
}

/* ---------------- Responsive ---------------- */

@media (max-width: 860px){
  .nav-links{ display: none; }
  .positioning-grid, .credibility-grid, .offer-grid{ grid-template-columns: 1fr; }
  .credibility-grid{ display: flex; flex-direction: column-reverse; }
  .footer-grid{ flex-direction: column; }
}