/* ===========================================================
   NITI KENDRA — Design tokens
   Palette pulled directly from the mark's own petal gradient:
   magenta -> coral -> amber, swinging through violet/indigo -> cyan.
   Base: near-black ink ground (institute gravity, not startup-black),
   warm paper for content sections (research-paper legibility).
=========================================================== */
:root{
  --ink:            #0B0B10;
  --ink-2:          #14141C;
  --paper:           #F7F4EC;
  --paper-2:         #EFEAdb;
  --line:            rgba(11,11,16,0.12);
  --line-dark:       rgba(247,244,236,0.14);

  --magenta:         #C42D6E;
  --coral:           #E8623F;
  --amber:           #F0A339;
  --violet:          #5B3E96;
  --indigo:          #34438E;
  --cyan:            #16A6C9;
  --deep-cyan:       #1176A0;

  --spectrum: linear-gradient(115deg, var(--magenta) 0%, var(--coral) 22%, var(--amber) 38%, var(--violet) 58%, var(--indigo) 74%, var(--cyan) 100%);
  --spectrum-soft: linear-gradient(115deg, rgba(196,45,110,0.14), rgba(232,98,63,0.12), rgba(240,163,57,0.1), rgba(91,62,150,0.12), rgba(52,67,142,0.12), rgba(22,166,201,0.14));

  --text-ink:        #16151C;
  --text-ink-soft:    rgba(22,21,28,0.62);
  --text-paper:       #F7F4EC;
  --text-paper-soft:  rgba(247,244,236,0.64);

  --display: 'Fraunces', 'Georgia', serif;
  --body:    'Manrope', -apple-system, sans-serif;
  --mono:    'JetBrains Mono', monospace;

  --container: 1180px;
  --gutter: clamp(20px, 5vw, 64px);
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-soft: cubic-bezier(0.4, 0, 0.2, 1);
}

*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *{ animation-duration:0.01ms !important; animation-iteration-count:1 !important; transition-duration:0.01ms !important; scroll-behavior:auto !important; }
}

body{
  font-family: var(--body);
  background:var(--ink);
  color: var(--text-paper);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  cursor:default;
}

img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul{ list-style:none; }
button{ font-family:inherit; cursor:pointer; }
::selection{ background: var(--coral); color:var(--ink); }

.brk{ display:none; }
@media (min-width: 720px){ .brk{ display:inline; } }

/* ---------- grain overlay ---------- */
.grain{
  position:fixed; inset:0; z-index:998; pointer-events:none; opacity:0.035; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- custom center dot cursor ---------- */
.kendra-dot{
  position:fixed; width:8px; height:8px; border-radius:50%;
  background:var(--coral); pointer-events:none; z-index:999;
  transform:translate(-50%,-50%);
  transition: width .25s var(--ease), height .25s var(--ease), background .25s var(--ease), opacity .3s;
  opacity:0; mix-blend-mode:difference;
}
@media (hover:hover) and (pointer:fine){
  .kendra-dot{ opacity:1; }
}
.kendra-dot.is-active{ width:36px; height:36px; background:var(--paper); }

/* ---------- preloader ---------- */
.preloader{
  position:fixed; inset:0; z-index:1000; background:var(--ink);
  display:flex; align-items:center; justify-content:center;
  transition: opacity .7s var(--ease), visibility .7s;
}
.preloader.is-done{ opacity:0; visibility:hidden; }
.preload-mark{ animation: spin-slow 3s linear infinite; }
@keyframes spin-slow{ to{ transform:rotate(360deg); } }

/* ===========================================================
   NAV
=========================================================== */
.site-nav{
  position:fixed; top:0; left:0; right:0; z-index:500;
  padding: 18px var(--gutter);
  transition: padding .4s var(--ease), background .4s var(--ease), border-color .4s var(--ease);
  border-bottom:1px solid transparent;
}
.site-nav.is-scrolled{
  padding: 12px var(--gutter);
  background: rgba(11,11,16,0.72);
  backdrop-filter: blur(14px) saturate(140%);
  border-bottom-color: var(--line-dark);
}
.nav-inner{
  max-width:1400px; margin:0 auto;
  display:flex; align-items:center; justify-content:space-between;
}
.nav-brand{ display:flex; align-items:center; gap:10px; }
.brand-mark{ flex-shrink:0; }
.brand-word{
  font-family:var(--body); font-weight:800; font-size:14px; letter-spacing:0.14em;
}
.nav-links{ display:flex; align-items:center; gap:2px; }
.nav-links a{
  font-size:13px; font-weight:600; letter-spacing:0.02em;
  padding:10px 16px; border-radius:100px;
  color: var(--text-paper-soft);
  display:flex; align-items:center; gap:6px;
  transition: color .3s var(--ease), background .3s var(--ease);
}
.nl-num{
  font-family:var(--mono); font-size:10px; color:var(--coral); opacity:0.8;
}
.nav-links a:hover{ color:var(--text-paper); background:rgba(255,255,255,0.06); }
.nav-cta{
  margin-left:8px;
  background: var(--paper) !important; color:var(--ink) !important;
  padding:10px 18px !important;
}
.nav-cta:hover{ background:var(--coral) !important; color:var(--paper) !important; }
.nav-cta .nl-num{ display:none; }

.nav-toggle{ display:none; flex-direction:column; gap:5px; background:none; border:none; padding:8px; z-index:501; }
.nav-toggle span{ width:22px; height:2px; background:var(--paper); transition:.3s var(--ease); }
.nav-toggle.is-open span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.nav-toggle.is-open span:nth-child(2){ opacity:0; }
.nav-toggle.is-open span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

@media (max-width: 880px){
  .nav-toggle{ display:flex; }
  .nav-links{
    position:fixed; inset:0 0 0 auto; width:min(320px, 82vw); height:100vh;
    background:var(--ink-2); flex-direction:column; align-items:flex-start; justify-content:center;
    padding:40px; gap:6px;
    transform:translateX(100%); transition: transform .5s var(--ease);
    border-left:1px solid var(--line-dark);
  }
  .nav-links.is-open{ transform:translateX(0); }
  .nav-links a{ width:100%; font-size:18px; padding:14px 10px; }
  .nav-cta{ margin-left:0; margin-top:12px; text-align:center; justify-content:center; }
}

/* ===========================================================
   HERO
=========================================================== */
.hero{
  position:relative; min-height:100vh; display:flex; align-items:center;
  padding: 140px var(--gutter) 100px;
  overflow:hidden;
}
.hero-bg-mark{
  position:absolute; top:50%; right:-8%; width:min(64vw, 900px); aspect-ratio:1;
  transform:translateY(-50%); opacity:0.9; pointer-events:none;
  animation: mark-drift 42s linear infinite;
}
@keyframes mark-drift{ to{ transform:translateY(-50%) rotate(360deg); } }
.hero-bg-mark svg{ width:100%; height:100%; }

.hero-grid-lines{
  position:absolute; inset:0; pointer-events:none; opacity:0.5;
  background-image:
    linear-gradient(var(--line-dark) 1px, transparent 1px),
    linear-gradient(90deg, var(--line-dark) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(ellipse 70% 60% at 30% 40%, black, transparent 75%);
}

.hero-inner{ position:relative; z-index:2; max-width:760px; }

.eyebrow{
  font-family:var(--mono); font-size:12px; letter-spacing:0.18em; text-transform:uppercase;
  color: var(--text-paper-soft); margin-bottom:28px; display:flex; gap:10px;
}
.eyebrow-dot{ color:var(--coral); }

.hero-headline{
  font-family:var(--display); font-weight:400; font-size:clamp(2.4rem, 6vw, 4.6rem);
  line-height:1.06; letter-spacing:-0.01em; color:var(--text-paper);
}
.hl-line{ display:block; overflow:hidden; }
.hero-headline em{ font-style:italic; font-weight:400; }
.hl-accent{ background:var(--spectrum); -webkit-background-clip:text; background-clip:text; color:transparent; }
.hl-underline{ position:relative; }
.hl-underline::after{
  content:''; position:absolute; left:0; right:0; bottom:0.06em; height:0.1em;
  background:var(--spectrum); border-radius:4px;
  transform-origin:left; transform:scaleX(0); animation: underline-grow 1.2s var(--ease) 1.6s forwards;
}
@keyframes underline-grow{ to{ transform:scaleX(1); } }

.hero-sub{
  margin-top:30px; max-width:540px; font-size:clamp(1rem, 1.6vw, 1.15rem);
  line-height:1.65; color:var(--text-paper-soft);
}

.hero-actions{ display:flex; gap:14px; margin-top:42px; flex-wrap:wrap; }

.btn{
  display:inline-flex; align-items:center; gap:10px;
  padding:15px 26px; border-radius:100px; font-size:14px; font-weight:700;
  letter-spacing:0.01em; transition: transform .35s var(--ease), background .35s var(--ease), color .35s var(--ease), box-shadow .35s var(--ease);
  border:1px solid transparent;
}
.btn svg{ transition: transform .35s var(--ease); }
.btn:hover svg{ transform:translateX(3px); }
.btn-primary{ background:var(--paper); color:var(--ink); }
.btn-primary:hover{ transform:translateY(-2px); box-shadow: 0 14px 30px -10px rgba(240,163,57,0.35); background:var(--amber); }
.btn-ghost{ border-color: var(--line-dark); color:var(--text-paper); }
.btn-ghost:hover{ background:rgba(255,255,255,0.06); transform:translateY(-2px); }
.btn-large{ padding:18px 32px; font-size:15px; }

.hero-scroll-cue{
  margin-top:70px; display:flex; align-items:center; gap:12px;
  font-family:var(--mono); font-size:11px; letter-spacing:0.14em; color:var(--text-paper-soft);
  text-transform:uppercase;
}
.scroll-line{ width:36px; height:1px; background: var(--text-paper-soft); position:relative; overflow:hidden; }
.scroll-line::after{
  content:''; position:absolute; left:-100%; top:0; bottom:0; width:100%; background:var(--coral);
  animation: scroll-run 2.2s ease-in-out infinite;
}
@keyframes scroll-run{ 50%{ left:100%; } 100%{ left:100%; } }

/* ===========================================================
   MARQUEE
=========================================================== */
.marquee-strip{
  border-top:1px solid var(--line-dark); border-bottom:1px solid var(--line-dark);
  padding:18px 0; overflow:hidden; background:var(--ink-2);
}
.marquee-track{
  display:flex; gap:22px; white-space:nowrap; width:max-content;
  animation: marquee-scroll 34s linear infinite;
  font-family:var(--mono); font-size:12px; letter-spacing:0.1em; color:var(--text-paper-soft);
}
.marquee-track span{ display:inline-flex; align-items:center; gap:22px; }
.mq-dot{ color:var(--coral); font-size:10px; }
@keyframes marquee-scroll{ to{ transform:translateX(-50%); } }

/* ===========================================================
   SHARED SECTION LAYOUT
=========================================================== */
.section{ position:relative; padding: 130px var(--gutter); }
.section-inner{ max-width:var(--container); margin:0 auto; }

.section-kicker{
  display:inline-block; font-family:var(--mono); font-size:12px; letter-spacing:0.14em;
  text-transform:uppercase; color:var(--coral); margin-bottom:22px;
}
.section-title{
  font-family:var(--display); font-weight:500; font-size:clamp(1.9rem, 4.4vw, 3.2rem);
  line-height:1.14; letter-spacing:-0.01em;
}
.section-lede{
  margin-top:24px; max-width:640px; font-size:clamp(1rem,1.4vw,1.1rem); line-height:1.7;
}
.section-lede em{ font-style:italic; }

.why-section, .verticals-section, .method-section, .values-section, .contact-section{
  background:var(--paper); color:var(--text-ink);
}
.why-section .section-lede, .verticals-section .section-lede, .method-section .section-lede{
  color:var(--text-ink-soft);
}
.why-section .section-kicker, .verticals-section .section-kicker, .method-section .section-kicker, .values-section .section-kicker, .contact-section .section-kicker{
  color:var(--magenta);
}

/* fade-up reveal utility (JS toggles .is-visible) */
.fade-up{ opacity:0; transform:translateY(28px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
.fade-up.is-visible{ opacity:1; transform:translateY(0); }
.reveal-line{ opacity:0; transform:translateY(100%); animation:none; }
.reveal-up{ opacity:0; transform:translateY(16px); }

/* ===========================================================
   WHY SECTION
=========================================================== */
.why-narrative{ margin-top:60px; max-width:820px; }
.why-lead{ font-size:clamp(1.05rem,1.6vw,1.28rem); line-height:1.7; color:var(--text-ink); margin-bottom:26px; }
.why-lead strong{ font-family:var(--display); font-style:italic; font-weight:500; }

.why-split{
  display:grid; grid-template-columns:1fr 1fr; gap:28px; margin: 44px 0 48px;
}
.why-col{
  background:var(--paper-2); border:1px solid var(--line); border-radius:18px; padding:30px;
  transition: transform .4s var(--ease), box-shadow .4s var(--ease);
}
.why-col:hover{ transform:translateY(-4px); box-shadow:0 20px 40px -20px rgba(0,0,0,0.15); }
.why-col-mark{
  display:inline-flex; width:34px; height:34px; border-radius:50%; align-items:center; justify-content:center;
  background:var(--ink); color:var(--paper); font-size:14px; margin-bottom:16px;
}
.why-col h3{ font-family:var(--display); font-weight:500; font-size:1.2rem; margin-bottom:10px; }
.why-col p{ font-size:0.95rem; line-height:1.6; color:var(--text-ink-soft); }

.why-turn{ padding-top:8px; border-top:1px solid var(--line); }

@media (max-width:720px){
  .why-split{ grid-template-columns:1fr; }
}

/* ---- angles visual ---- */
.angles-visual{ margin-top:80px; display:flex; flex-direction:column; align-items:center; }
.angles-canvas{ position:relative; width:min(100%, 560px); padding:20px 0 10px; }
.angles-svg{ width:100%; height:auto; overflow:visible; }
.angles-center-ring{ fill:var(--paper); stroke:var(--ink); stroke-width:1; opacity:0.9; }
.angles-center-label{ font-family:var(--body); font-weight:800; font-size:15px; letter-spacing:0.08em; fill:var(--ink); }
.angles-center-label-sm{ font-size:11px; font-weight:700; letter-spacing:0.1em; fill: var(--text-ink-soft); }
.angle-petal{ transition: transform .4s var(--ease), opacity .4s var(--ease); transform-origin:300px 300px; cursor:pointer; }
.angle-petal:hover, .angle-petal.is-active{ opacity:1 !important; }
.angle-hotspot-ring{
  fill:var(--paper); stroke:var(--line); stroke-width:1.5; opacity:0.9;
  transition: stroke .3s var(--ease), fill .3s var(--ease);
  pointer-events:none;
}
.angle-hotspot-dot{
  fill:var(--ink); opacity:0.55; transition: fill .3s var(--ease), opacity .3s var(--ease);
  pointer-events:none;
}
.angle-hotspot.is-hover .angle-hotspot-ring{ stroke:var(--coral); }
.angle-hotspot.is-hover .angle-hotspot-dot{ fill:var(--coral); opacity:1; }
.angle-label{
  position:absolute; font-family:var(--mono); font-size:11px; letter-spacing:0.04em;
  color:var(--text-ink); background:var(--paper); border:1px solid var(--line); border-radius:8px;
  padding:6px 10px; transform:translate(-50%,-50%); opacity:0; pointer-events:none;
  transition:opacity .25s var(--ease), transform .25s var(--ease); white-space:nowrap;
  box-shadow: 0 8px 20px -8px rgba(0,0,0,0.2);
}
.angle-label.is-visible{ opacity:1; transform:translate(-50%,-60%); }
.angles-caption{ margin-top:38px; font-size:13px; color:var(--text-ink-soft); font-family:var(--mono); letter-spacing:0.02em; }

/* ===========================================================
   VERTICALS
=========================================================== */
.vert-stack{ margin-top:70px; display:flex; flex-direction:column; }
.vert-card{
  display:grid; grid-template-columns:auto 180px 1fr; gap:40px; align-items:start;
  padding: 56px 0; border-top:1px solid var(--line);
}
.vert-stack .vert-card:last-child{ border-bottom:1px solid var(--line); }

.vert-index{ display:flex; flex-direction:column; align-items:center; gap:14px; padding-top:6px; }
.vert-index-num{ font-family:var(--display); font-style:italic; font-size:1.6rem; color: var(--text-ink-soft); }
.vert-index-line{ width:1px; flex:1; background:var(--line); min-height:40px; }

.vert-media{ display:flex; align-items:flex-start; justify-content:center; padding-top:8px; }
.vert-icon{ width:100%; max-width:150px; }

.vert-copy{ max-width:640px; }
.vert-eyebrow{ display:block; font-family:var(--mono); font-size:11px; letter-spacing:0.1em; text-transform:uppercase; color:var(--indigo); margin-bottom:10px; }
.vert-copy h3{ font-family:var(--display); font-weight:500; font-size:clamp(1.6rem,3vw,2.2rem); margin-bottom:16px; }
.vert-desc{ font-size:1.02rem; line-height:1.72; color:var(--text-ink-soft); margin-bottom:22px; }
.vert-list{ display:grid; grid-template-columns:1fr 1fr; gap:10px 20px; }
.vert-list li{
  font-size:0.9rem; padding-left:20px; position:relative; color:var(--text-ink);
}
.vert-list li::before{
  content:''; position:absolute; left:0; top:0.55em; width:8px; height:8px; border-radius:2px;
  background:var(--spectrum);
}
.vert-card[data-vert="research"] .vert-list li::before{ background:var(--magenta); }
.vert-card[data-vert="consulting"] .vert-list li::before{ background:var(--violet); }
.vert-card[data-vert="academy"] .vert-list li::before{ background:var(--cyan); }

@media (max-width:880px){
  .vert-card{ grid-template-columns:1fr; gap:20px; }
  .vert-index{ flex-direction:row; }
  .vert-index-line{ width:auto; flex:1; height:1px; min-height:0; }
  .vert-media{ order:-1; max-width:110px; }
  .vert-list{ grid-template-columns:1fr; }
}

/* ===========================================================
   METHOD
=========================================================== */
.method-flow{
  margin-top:70px; display:grid; grid-template-columns:repeat(4,1fr); gap:0; align-items:start;
}
.method-step{
  padding:0 20px; position:relative;
  opacity:0; transform:translateY(20px); transition:opacity .6s var(--ease), transform .6s var(--ease);
}
.method-step.is-visible{ opacity:1; transform:translateY(0); }
.method-step-visual{
  width:64px; height:64px; border-radius:50%; border:1px solid var(--line);
  display:flex; align-items:center; justify-content:center; margin-bottom:24px;
  background:var(--paper); position:relative;
}
.method-step-tag{ font-family:var(--mono); font-size:10px; letter-spacing:0.06em; text-transform:uppercase; color:var(--text-ink-soft); }
.method-step[data-step="1"] .method-step-visual{ box-shadow: inset 0 0 0 2px var(--magenta); }
.method-step[data-step="2"] .method-step-visual{ box-shadow: inset 0 0 0 2px var(--coral); }
.method-step[data-step="3"] .method-step-visual{ box-shadow: inset 0 0 0 2px var(--violet); }
.method-step[data-step="4"] .method-step-visual{ box-shadow: inset 0 0 0 2px var(--cyan); }
.method-step h4{ font-family:var(--display); font-weight:500; font-size:1.2rem; margin-bottom:10px; }
.method-step p{ font-size:0.92rem; line-height:1.6; color:var(--text-ink-soft); }
.method-connector{ height:1px; background:var(--line); margin-top:32px; align-self:start; }

@media (max-width:900px){
  .method-flow{ grid-template-columns:1fr; gap:36px; }
  .method-connector{ display:none; }
}

/* ===========================================================
   CENTER / MANIFESTO
=========================================================== */
.center-section{
  background:var(--ink); color:var(--text-paper); text-align:center;
  overflow:hidden;
}
.center-bg{
  position:absolute; top:50%; left:50%; width:min(120vw, 1100px); aspect-ratio:1;
  transform:translate(-50%,-50%); opacity:0.16; pointer-events:none;
  animation: mark-drift 60s linear infinite reverse;
}
.center-inner{ position:relative; z-index:2; display:flex; flex-direction:column; align-items:center; }
.center-kicker{ color:var(--coral) !important; }
.center-statement{
  font-family:var(--display); font-weight:400; font-style:italic;
  font-size:clamp(1.5rem, 3.4vw, 2.5rem); line-height:1.5; max-width:920px;
  color: var(--text-paper-soft);
}
.center-statement-strong{
  display:inline-block; margin-top:18px; font-style:normal; font-weight:500;
  color:var(--text-paper);
}
.center-stats{
  margin-top:80px; display:grid; grid-template-columns:repeat(3,1fr); gap:40px; width:100%; max-width:820px;
  padding-top:50px; border-top:1px solid var(--line-dark);
}
.c-stat{ display:flex; flex-direction:column; align-items:center; gap:10px; }
.c-stat-num{
  font-family:var(--display); font-weight:500; font-size:clamp(2.2rem,4vw,3rem);
  background:var(--spectrum); -webkit-background-clip:text; background-clip:text; color:transparent;
}
.c-stat-label{ font-size:0.85rem; color:var(--text-paper-soft); line-height:1.5; }

@media (max-width:720px){
  .center-stats{ grid-template-columns:1fr; gap:32px; }
}

/* ===========================================================
   VALUES
=========================================================== */
.values-section{ background:var(--paper-2); }
.values-grid{ margin-top:60px; display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line); border:1px solid var(--line); }
.value-card{
  background:var(--paper-2); padding:36px 28px; transition:background .4s var(--ease);
}
.value-card:hover{ background:var(--paper); }
.value-num{ font-family:var(--display); font-style:italic; font-size:1.3rem; color:var(--magenta); display:block; margin-bottom:18px; }
.value-card h3{ font-family:var(--display); font-weight:500; font-size:1.15rem; margin-bottom:12px; line-height:1.3; }
.value-card p{ font-size:0.9rem; line-height:1.6; color:var(--text-ink-soft); }

@media (max-width:900px){
  .values-grid{ grid-template-columns:1fr 1fr; }
}
@media (max-width:560px){
  .values-grid{ grid-template-columns:1fr; }
}

/* ===========================================================
   CONTACT
=========================================================== */
.contact-section{ background:var(--ink); color:var(--text-paper); }
.contact-section .section-kicker{ color:var(--coral) !important; }
.contact-inner{ max-width:720px; }
.contact-title{
  font-family:var(--display); font-weight:500; font-size:clamp(2.2rem,5vw,3.6rem);
  line-height:1.1; letter-spacing:-0.01em; margin-top:6px;
}
.contact-sub{ margin-top:24px; max-width:520px; color:var(--text-paper-soft); font-size:1.05rem; line-height:1.65; }

.contact-form{ margin-top:56px; display:flex; flex-direction:column; gap:22px; }
.cf-row{ display:grid; grid-template-columns:1fr 1fr; gap:22px; }
.cf-field{ position:relative; }
.cf-field-full{ grid-column:1/-1; }
.cf-field input, .cf-field textarea{
  width:100%; background:transparent; border:none; border-bottom:1px solid var(--line-dark);
  color:var(--text-paper); font-family:var(--body); font-size:1rem; padding:12px 2px 12px;
  transition:border-color .3s var(--ease); resize:vertical;
}
.cf-field input:focus, .cf-field textarea:focus{ outline:none; border-color:var(--coral); }
.cf-field label{
  position:absolute; left:2px; top:12px; color:var(--text-paper-soft); font-size:1rem;
  pointer-events:none; transition: transform .25s var(--ease), font-size .25s var(--ease), color .25s var(--ease);
  transform-origin:left top;
}
.cf-field input:focus + label, .cf-field input:not(:placeholder-shown) + label,
.cf-field textarea:focus + label, .cf-field textarea:not(:placeholder-shown) + label{
  transform:translateY(-20px) scale(0.78); color:var(--coral);
}
.contact-form .btn{ align-self:flex-start; margin-top:10px; }
.cf-success{
  margin-top:6px; font-size:0.9rem; color:var(--cyan);
  opacity:0; height:0; overflow:hidden; transition:opacity .4s var(--ease);
}
.cf-success.is-shown{ opacity:1; height:auto; }

@media (max-width:640px){
  .cf-row{ grid-template-columns:1fr; }
}

/* ===========================================================
   FOOTER
=========================================================== */
.site-footer{ background:var(--ink-2); padding:70px var(--gutter) 30px; border-top:1px solid var(--line-dark); }
.footer-inner{ max-width:1400px; margin:0 auto; }
.footer-top{ display:flex; justify-content:space-between; gap:60px; flex-wrap:wrap; padding-bottom:50px; border-bottom:1px solid var(--line-dark); }
.footer-brand{ display:flex; align-items:center; gap:14px; }
.footer-brand-word{ font-weight:800; font-size:15px; letter-spacing:0.1em; display:block; }
.footer-brand-sub{ font-size:12.5px; color:var(--text-paper-soft); display:block; margin-top:4px; }
.footer-cols{ display:flex; gap:64px; flex-wrap:wrap; }
.footer-col{ display:flex; flex-direction:column; gap:12px; }
.footer-col-title{ font-family:var(--mono); font-size:11px; letter-spacing:0.1em; text-transform:uppercase; color:var(--coral); margin-bottom:6px; }
.footer-col a{ font-size:14px; color:var(--text-paper-soft); transition:color .3s var(--ease); }
.footer-col a:hover{ color:var(--text-paper); }
.footer-bottom{ padding-top:26px; display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px; font-size:12.5px; color:var(--text-paper-soft); }
.footer-tag{ font-family:var(--mono); letter-spacing:0.08em; }

@media (max-width:600px){
  .footer-top{ flex-direction:column; gap:36px; }
}