/* ============================================
   na.bucatarie — design tokens (v2 "Masa de desen")
   Paper: piatră-gri rece / Ink: grafit aproape-negru
   Accent: roșu de creion de arhitect (redline), folosit pt. acțiuni
   Display: Bodoni Moda / Body: IBM Plex Sans / Utility: IBM Plex Mono
============================================ */

:root{
  --paper: #E7E2D6;
  --paper-2: #DCD5C4;
  --ink: #17171A;
  --ink-soft: #4B4A46;
  --line: #C7BFAC;

  --red: #B8452E;
  --red-deep: #8F3520;
  --red-light: #CC6B4E;
  --brass: #8B7355;

  --panel-dark: #121214;
  --panel-dark-2: #1B1B1B;
  --cream-on-dark: #EDE9DD;

  --font-display: "Bodoni Moda", "Times New Roman", serif;
  --font-body: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: "IBM Plex Mono", monospace;

  --container: 1240px;
  --edge: clamp(20px, 5vw, 64px);
}

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

body{
  margin:0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  position: relative;
}

img{ max-width: 100%; display:block; }
a{ color: inherit; text-decoration: none; }
ul{ margin:0; padding:0; list-style:none; }
button{ font-family: inherit; cursor:pointer; }

/* paper-grain texture, subtle, over the whole page */
.grain{
  position: fixed; inset:0; z-index: 5; pointer-events:none;
  opacity: 0.05;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}

/* ---------- Utility ---------- */
.eyebrow{
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--red-deep);
  display:flex;
  align-items:center;
  gap:10px;
  margin: 0 0 18px;
}
.eyebrow-light{
  color: #F2C9AE;
  font-size: 13px;
  font-weight: 600;
  text-shadow: 0 1px 2px rgba(0,0,0,0.65), 0 2px 14px rgba(0,0,0,0.45);
}
.tick{
  width: 24px; height: 8px;
  position: relative;
  flex-shrink:0;
}
.tick::before{
  content:""; position:absolute; left:0; right:0; top:50%;
  height:1px; background: currentColor;
}
.tick::after{
  content:""; position:absolute; left:0; top:0; bottom:0; width:1px;
  background: currentColor; box-shadow: 23px 0 0 currentColor;
}

.section-title{
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(30px, 4vw, 48px);
  line-height: 1.12;
  letter-spacing: -0.01em;
  margin: 0 0 20px;
}
.section-title--light{ color: var(--cream-on-dark); }
.section-title em{ font-style: italic; font-weight:400; }

.lead{ font-size: 18px; color: var(--ink-soft); max-width: 46ch; margin: 0 0 24px; }
.lead--center{ margin-left:auto; margin-right:auto; text-align:center; }
.lead--light{ color: #C9C2B4; }

.section-head{ max-width: var(--container); margin: 0 auto; padding: 0 var(--edge); }
.section-head--center{ text-align:center; }
.section-head--center .eyebrow{ justify-content:center; }
.section-head--center .lead{ margin-left:auto; margin-right:auto; }

.btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding: 15px 28px;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 14.5px;
  letter-spacing: 0.01em;
  border-radius: 2px;
  border: 1px solid transparent;
  transition: transform .18s ease, background .18s ease, color .18s ease, border-color .18s ease;
}
.btn-primary{ background: var(--red); color: #FBF7EF; }
.btn-primary:hover{ background: var(--red-deep); }
.btn-ghost{ border-color: var(--ink); color: var(--ink); }
.btn-ghost:hover{ background: var(--ink); color: var(--paper); }
.btn-nav{ padding: 11px 20px; font-size: 13px; }
.btn-block{ width:100%; }

/* ============ NAV ============ */
.nav{
  position: fixed; top:0; left:0; right:0; z-index: 100;
  background: transparent;
  transition: background .3s ease, box-shadow .3s ease;
}
.nav.scrolled{
  background: rgba(239,233,223,0.92);
  backdrop-filter: blur(8px);
  box-shadow: 0 1px 0 var(--line);
}
.nav-inner{
  max-width: var(--container); margin:0 auto; padding: 18px var(--edge);
  display:flex; align-items:center; justify-content:space-between; gap: 24px;
}
.nav-logo{ display:flex; align-items:center; height: 30px; }
.nav-logo img{ height: 30px; width:auto; }
.logo-white{ display:none; }
.nav.on-dark .logo-black{ display:none; }
.nav.on-dark .logo-white{ display:block; }
.nav.on-dark:not(.scrolled) .eyebrow{ color:#EFE9DF; }

.nav-links{ display:flex; gap: 30px; flex:1; justify-content:center; }
.nav-links a{
  font-size: 14px; font-weight:500; color: var(--ink);
  position:relative; padding: 4px 0;
}
.nav.on-dark:not(.scrolled) .nav-links a{ color: var(--paper); }
.nav-links a::after{
  content:""; position:absolute; left:0; bottom:0; height:1px; width:0;
  background: currentColor; transition: width .25s ease;
}
.nav-links a:hover::after{ width:100%; }

.nav-toggle{ display:none; background:none; border:none; width:28px; height:20px; position:relative; flex-direction:column; justify-content:space-between; padding:0; }
.nav-toggle span{ display:block; height:1px; background: var(--ink); width:100%; }
.nav.on-dark:not(.scrolled) .nav-toggle span{ background: var(--paper); }
.nav-mobile{
  display:none; flex-direction:column; gap:0;
  background: var(--paper);
  border-top: 1px solid var(--line);
}
.nav-mobile a{
  padding: 16px var(--edge); border-bottom: 1px solid var(--line);
  font-size: 15px; font-weight:500;
}
.nav-mobile .btn{ margin: 16px var(--edge); }

.nav-mobile.open{ display:flex; }

@media (max-width: 900px){
  .nav-links, .btn-nav{ display:none; }
  .nav-toggle{ display:flex; }
}

/* ============ HERO ============ */
.hero{ position:relative; min-height: 100svh; display:flex; align-items:flex-end; overflow:hidden; }
.hero-media{ position:absolute; inset:0; }
.hero-media img{ width:100%; height:100%; object-fit:cover; }
.hero-scrim{
  position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(18,18,20,0.18) 0%, rgba(18,18,20,0.4) 55%, rgba(12,12,13,0.88) 100%);
}
.hero-media::after{
  content:"";
  position:absolute; inset:0;
  background-image:
    repeating-linear-gradient(0deg, rgba(237,233,221,0.09) 0px, rgba(237,233,221,0.09) 1px, transparent 1px, transparent 48px),
    repeating-linear-gradient(90deg, rgba(237,233,221,0.09) 0px, rgba(237,233,221,0.09) 1px, transparent 1px, transparent 48px);
}
.hero-content{
  position:relative; z-index:2; color: var(--paper);
  max-width: var(--container); margin:0 auto; width:100%;
  padding: 0 var(--edge) 90px;
}
.hero-title{
  font-family: var(--font-display); font-weight:400;
  font-size: clamp(38px, 6.4vw, 84px);
  line-height: 1.05; letter-spacing:-0.015em;
  margin: 0 0 26px; max-width: 14ch;
}
.hero-title em{ font-style:italic; font-weight:400; color:var(--red-light); }
.hero-sub{ font-size: 18px; max-width: 46ch; color: #DCD5C6; margin: 0 0 34px; }
.hero-actions{ display:flex; gap:16px; flex-wrap:wrap; }
.hero .btn-ghost{ border-color: var(--paper); color: var(--paper); }
.hero .btn-ghost:hover{ background: var(--paper); color: var(--ink); }

@media (max-width: 700px){
  /* Reserves clearance under the fixed nav: on short phone screens the
     stacked hero text can grow taller than 100svh, and align-items:flex-end
     leaves no slack — without this the eyebrow line ends up flush against
     the top, behind/under the transparent nav bar. */
  .hero{ padding-top: 96px; }
}

/* ============ STATS ============ */
.stats{ background: var(--panel-dark); color: var(--paper); padding: 46px var(--edge); }
.stats-inner{
  max-width: var(--container); margin:0 auto;
  display:flex; align-items:center; justify-content:center; gap: 48px; flex-wrap:wrap; text-align:center;
}
.stat{ display:flex; flex-direction:column; gap:6px; }
.stat-num{ font-family: var(--font-display); font-size: 42px; color:var(--red-light); }
.stat-label{ font-family: var(--font-mono); font-size: 11.5px; letter-spacing:.06em; text-transform:uppercase; color:#B7AF9F; }
.stat-div{ width:1px; height:44px; background: rgba(255,255,255,0.15); }
@media (max-width:700px){ .stat-div{ display:none; } .stats-inner{ gap:28px; } }

/* ============ VALUES ============ */
.values{ padding: 120px 0 90px; }
.values-grid{
  max-width: var(--container); margin: 56px auto 0; padding: 0 var(--edge);
  display:grid; grid-template-columns: repeat(3,1fr); gap: 1px;
  background: var(--line);
  border-top:1px solid var(--line); border-bottom:1px solid var(--line);
}
.value-card{ background: var(--paper); padding: 40px 36px; }
.value-index{ font-family: var(--font-mono); font-size:13px; color: var(--red-deep); }
.value-card h3{ font-family: var(--font-display); font-size: 24px; font-weight:500; margin: 18px 0 12px; }
.value-card p{ color: var(--ink-soft); font-size:15px; }
@media (max-width: 860px){
  .values-grid{ grid-template-columns:1fr; }
}

/* ============ CONFIGURATOR ============ */
.configurator{ background: var(--paper-2); padding: 100px 0; }
.configurator-inner{
  max-width: var(--container); margin:0 auto; padding: 0 var(--edge);
  display:grid; grid-template-columns: 1.2fr 0.8fr; gap: 70px; align-items:center;
}
.check-list{ display:flex; flex-direction:column; gap:14px; margin-bottom:34px; }
.check-list li{ padding-left: 22px; position:relative; color: var(--ink-soft); font-size:15px; }
.check-list li::before{ content:"—"; position:absolute; left:0; color: var(--red-deep); }
.check-list li span{ color: var(--ink); font-weight:600; }
.configurator-plate{
  position:relative; aspect-ratio: 4/5; border:1px solid var(--ink);
  display:flex; align-items:flex-end; justify-content:center; padding-bottom: 26px;
  background-color: var(--paper-2);
  background-image:
    repeating-linear-gradient(0deg, transparent, transparent 27px, rgba(23,23,24,0.07) 27px, rgba(23,23,24,0.07) 28px),
    repeating-linear-gradient(90deg, transparent, transparent 27px, rgba(23,23,24,0.07) 27px, rgba(23,23,24,0.07) 28px),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 500'><rect x='40' y='40' width='320' height='420' fill='none' stroke='%23171718' stroke-width='2'/><path d='M40 40 L360 40 L360 130' fill='none' stroke='%23171718' stroke-width='6'/><circle cx='300' cy='85' r='16' fill='none' stroke='%23171718' stroke-width='2'/><rect x='190' y='62' width='26' height='26' fill='none' stroke='%23171718' stroke-width='2'/><line x1='190' y1='62' x2='216' y2='88' stroke='%23171718' stroke-width='1.5'/><line x1='216' y1='62' x2='190' y2='88' stroke='%23171718' stroke-width='1.5'/><rect x='120' y='280' width='160' height='95' fill='none' stroke='%23b8452e' stroke-width='2.5'/><line x1='120' y1='405' x2='280' y2='405' stroke='%23b8452e' stroke-width='1.5'/><line x1='120' y1='398' x2='120' y2='412' stroke='%23b8452e' stroke-width='1.5'/><line x1='280' y1='398' x2='280' y2='412' stroke='%23b8452e' stroke-width='1.5'/></svg>");
  background-size: 28px 28px, 28px 28px, 62% auto;
  background-position: center, center, center 34%;
  background-repeat: repeat, repeat, no-repeat;
}
.plate-tick{ position:absolute; width:20px; height:20px; }
.plate-tick.tl{ top:-1px; left:-1px; border-top:1.5px solid var(--red-deep); border-left:1.5px solid var(--red-deep); }
.plate-tick.tr{ top:-1px; right:-1px; border-top:1.5px solid var(--red-deep); border-right:1.5px solid var(--red-deep); }
.plate-tick.bl{ bottom:-1px; left:-1px; border-bottom:1.5px solid var(--red-deep); border-left:1.5px solid var(--red-deep); }
.plate-tick.br{ bottom:-1px; right:-1px; border-bottom:1.5px solid var(--red-deep); border-right:1.5px solid var(--red-deep); }
.plate-label{ font-family: var(--font-mono); font-size:12px; letter-spacing:.1em; text-transform:uppercase; color: var(--ink-soft); background: var(--paper-2); padding: 4px 10px; }
@media (max-width: 860px){
  .configurator-inner{ grid-template-columns: 1fr; }
  .configurator-plate{ aspect-ratio: 16/9; }
}

/* ============ PORTFOLIO / LOOKBOOK ============ */
.portfolio{ padding: 130px 0 40px; }
.lookbook{ margin-top: 80px; }
.style-row{
  display:grid; grid-template-columns: 1.35fr 1fr;
  align-items:stretch;
  border-top: 1px solid var(--line);
}
.style-row:last-child{ border-bottom: 1px solid var(--line); }
.style-row--reverse{ direction: rtl; }
.style-row--reverse > *{ direction: ltr; }
.style-media{ position:relative; overflow:hidden; aspect-ratio: 3/2; }
.style-media img{ width:100%; height:100%; object-fit:cover; transition: transform .7s cubic-bezier(.2,.8,.2,1); }
.style-row:hover .style-media img{ transform: scale(1.035); }
.style-copy{
  padding: 56px var(--edge);
  display:flex; flex-direction:column; justify-content:center;
  max-width: 560px;
}
.style-index{
  display:inline-block;
  font-family: var(--font-mono); font-size:12px; letter-spacing:.1em;
  color: var(--red-deep); border: 1px solid var(--red-deep);
  padding: 5px 11px; margin-bottom: 22px;
}
.style-name{ font-family: var(--font-display); font-style:italic; font-weight:400; font-size: clamp(26px,3vw,34px); margin:0 0 18px; }
.mood-swatch{
  display:inline-block; width:22px; height:22px; margin: 0 0 18px;
  background: var(--mood, var(--brass));
  border: 2px solid var(--paper);
  outline: 1px solid var(--line);
  transform: rotate(-4deg);
  box-shadow: 2px 3px 6px rgba(0,0,0,0.18);
}
.style-copy p{ color: var(--ink-soft); font-size:15.5px; max-width:44ch; }

@media (max-width: 900px){
  .style-row, .style-row--reverse{ grid-template-columns: 1fr; direction:ltr; }
  .style-media{ aspect-ratio: 4/3; }
  .style-copy{ padding: 32px var(--edge); max-width:none; }
}

/* ============ PROCESS ============ */
.process{ padding: 120px 0; }
.process-grid{
  max-width: var(--container); margin: 56px auto 0; padding: 0 var(--edge);
  display:grid; grid-template-columns: repeat(4,1fr); gap: 40px;
}
.process-num{ font-family: var(--font-display); font-size: 36px; color: var(--red-deep); display:block; margin-bottom:14px; }
.process-step h3{ font-size:18px; margin: 0 0 10px; font-weight:600; }
.process-step p{ color: var(--ink-soft); font-size:14.5px; }
.process-link{ display:inline-block; margin-top:14px; font-size:13.5px; font-weight:600; border-bottom:1px solid var(--ink); }
@media (max-width: 900px){ .process-grid{ grid-template-columns: repeat(2,1fr); row-gap:44px; } }
@media (max-width: 560px){ .process-grid{ grid-template-columns: 1fr; } }

/* ============ TESTIMONIALS ============ */
.testimonials{ background: var(--panel-dark-2); color: var(--paper); padding: 120px 0; }
.testimonials .eyebrow{ color:var(--red-light); }
.testimonials .section-title{ color: var(--paper); }
.testi-grid{
  max-width: var(--container); margin: 56px auto 0; padding: 0 var(--edge);
  display:grid; grid-template-columns: repeat(3,1fr); gap: 32px;
}
.testi-card{ margin:0; padding: 32px 0 0; border-top: 1px solid rgba(255,255,255,0.18); }
.testi-card p{ font-family: var(--font-display); font-style:italic; font-size:18px; line-height:1.5; color:#E7E0D2; margin:0 0 20px; }
.testi-card cite{ font-family: var(--font-mono); font-style:normal; font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:#B7AF9F; }
@media (max-width: 860px){ .testi-grid{ grid-template-columns:1fr; } }

/* ============ PRICING ============ */
.pricing{ padding: 120px 0; }
.pricing-grid{
  max-width: var(--container); margin: 56px auto 0; padding: 0 var(--edge);
  display:grid; grid-template-columns: repeat(3,1fr); gap: 28px; align-items:stretch;
}
.price-card{
  position:relative; border: 1px solid var(--line); padding: 44px 34px;
  display:flex; flex-direction:column;
  background: var(--paper);
}
.price-card--featured{ border-color: var(--ink); background: var(--panel-dark); color: var(--paper); }
.price-badge{
  position:absolute; top:-13px; left:34px; background: var(--red); color: var(--panel-dark);
  font-family: var(--font-mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase;
  padding: 5px 12px;
}
.price-card h3{ font-family: var(--font-display); font-size:22px; font-weight:500; margin:0 0 14px; }
.price-tag{ font-family: var(--font-display); font-size: 48px; margin:0; }
.price-tag span{ font-size:16px; font-family:var(--font-mono); }
.price-note{ font-size:13px; color: var(--red-deep); margin: 4px 0 0; }
.price-card--featured .price-note{ color:var(--red-light); }
.price-desc{ font-size:14.5px; margin: 14px 0 28px; color: var(--ink-soft); }
.price-card--featured .price-desc{ color:#C9C2B4; }
.price-features{ display:flex; flex-direction:column; gap:12px; margin-top:auto; }
.price-features li{ font-size:14px; padding-left:22px; position:relative; }
.price-features li.on::before{ content:"✓"; position:absolute; left:0; color: var(--red-deep); }
.price-card--featured .price-features li.on::before{ color:var(--red-light); }
.price-features li.off{ opacity:.35; }
.price-features li.off::before{ content:"–"; position:absolute; left:0; }
@media (max-width: 900px){ .pricing-grid{ grid-template-columns:1fr; } .price-card--featured{ order:-1; } }

/* ============ ABOUT ============ */
.about{ padding: 130px 0; background: var(--paper-2); }
.about-inner{
  max-width: var(--container); margin:0 auto; padding: 0 var(--edge);
  display:grid; grid-template-columns: 0.75fr 1.25fr; gap: 64px; align-items:start;
}
.about-media{ position:relative; }
.about-media img{ width:100%; height:auto; object-fit:cover; filter: grayscale(0.15) contrast(1.02); }
.about-media-tag{
  position:absolute; left:0; bottom:-16px;
  background: var(--ink); color: var(--paper);
  font-family: var(--font-mono); font-size:11.5px; letter-spacing:.08em; text-transform:uppercase;
  padding: 8px 16px;
}
.about-copy p{ color: var(--ink-soft); font-size:16.5px; max-width:60ch; }
@media (max-width: 860px){
  .about-inner{ grid-template-columns:1fr; }
  .about-media{ max-width: 320px; }
}

/* ============ ACCESSIBILITY / SKIP LINK ============ */
.skip-link{
  position:absolute; left:16px; top:-60px; z-index: 1000;
  background: var(--ink); color: var(--paper);
  padding: 12px 20px; font-size:14px; font-weight:600;
  transition: top .2s ease;
}
.skip-link:focus{ top: 16px; }

:focus-visible{ outline: 2px solid var(--red); outline-offset: 3px; }

/* ============ MOBILE STICKY CTA ============ */
.mobile-cta{
  display:none;
  position: fixed; left:0; right:0; bottom:0; z-index: 90;
  background: var(--ink); color: var(--paper);
  text-align:center; font-weight:600; font-size:14.5px;
  padding: 16px; letter-spacing:.01em;
}
@media (max-width: 700px){
  .mobile-cta{ display:block; }
  .footer{ padding-bottom: 70px; }
}

/* ============ BACK TO TOP ============ */
.to-top{
  position: fixed; right: 22px; bottom: 22px; z-index: 90;
  width: 46px; height:46px; border-radius:50%;
  background: var(--ink); color: var(--paper); border:none;
  font-size:18px; line-height:1;
  display:flex; align-items:center; justify-content:center;
  opacity:0; pointer-events:none; transform: translateY(10px);
  transition: opacity .25s ease, transform .25s ease, background .2s ease;
}
.to-top.visible{ opacity:1; pointer-events:auto; transform:none; }
.to-top:hover{ background: var(--red-deep); }
@media (max-width: 700px){ .to-top{ bottom: 84px; } }

/* ============ NAV ACTIVE LINK ============ */
.nav-links a.active{ color: var(--red-deep); }
.nav-links a.active::after{ width:100%; }
.nav.on-dark:not(.scrolled) .nav-links a.active{ color:var(--red-light); }

/* ============ FAQ ============ */
.faq{ padding: 120px 0; }
.faq-list{ max-width: var(--container); margin: 56px auto 0; padding: 0 var(--edge); }
.faq-item{ border-bottom: 1px solid var(--line); }
.faq-item h3{ margin: 0; font-weight: normal; }
.faq-q{
  width:100%; display:flex; align-items:center; justify-content:space-between;
  background:none; border:none; padding: 26px 0; text-align:left;
  font-family: var(--font-display); font-size: 19px; color: var(--ink);
}
.faq-icon{ font-family: var(--font-mono); font-size:20px; color: var(--red-deep); transition: transform .25s ease; flex-shrink:0; margin-left:20px; }
.faq-item.open .faq-icon{ transform: rotate(45deg); }
.faq-a{ max-height:0; overflow:hidden; transition: max-height .3s ease; }
.faq-a p{ padding: 0 0 26px; color: var(--ink-soft); max-width: 68ch; font-size:15.5px; }

/* ============ CONTACT ============ */
.contact{ background: var(--panel-dark); color: var(--paper); padding: 120px 0; }
.contact-inner{
  max-width: var(--container); margin:0 auto; padding: 0 var(--edge);
  display:grid; grid-template-columns: 0.9fr 1.1fr; gap: 70px;
}
.contact-info{ display:flex; flex-direction:column; gap:16px; margin: 30px 0; }
.contact-info li{ display:flex; gap:14px; font-size:15px; }
.contact-info li span{ font-family: var(--font-mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:#8f8878; width:80px; flex-shrink:0; padding-top:2px; }
.contact-info li a:hover{ color:var(--red-light); }
.social-links{ display:flex; gap:22px; }
.social-links a{ font-size:14px; font-weight:600; border-bottom:1px solid rgba(239,233,223,0.4); padding-bottom:2px; }
.social-links a:hover{ border-color:var(--red-light); color:var(--red-light); }

.contact-form{ display:flex; flex-direction:column; gap:20px; }
.form-row{ display:flex; flex-direction:column; gap:8px; }
.form-row-split{ display:grid; grid-template-columns:1fr 1fr; gap:20px; }
.form-row label{ font-family: var(--font-mono); font-size:11.5px; letter-spacing:.08em; text-transform:uppercase; color:#9a927f; }
.form-row input, .form-row textarea{
  background: transparent; border:none; border-bottom: 1px solid rgba(239,233,223,0.3);
  color: var(--paper); font-family: var(--font-body); font-size:15px; padding: 8px 2px;
  resize: vertical;
}
.form-row input:focus, .form-row textarea:focus{ outline:none; border-color:var(--red-light); }
.form-status{ font-size:13.5px; color:var(--red-light); min-height: 1.4em; margin:0; }
@media (max-width: 860px){
  .contact-inner{ grid-template-columns:1fr; }
  .form-row-split{ grid-template-columns:1fr; }
}

/* ============ FOOTER ============ */
.footer{ background: var(--panel-dark-2); color:#C9C2B4; padding: 70px 0 0; }
.footer-inner{
  max-width: var(--container); margin:0 auto; padding: 0 var(--edge);
  display:grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 40px; padding-bottom: 60px;
  border-bottom: 1px solid rgba(255,255,255,0.1);
}
.footer-logo{ height:26px; margin-bottom:16px; }
.footer-brand p{ font-size:13.5px; line-height:1.7; }
.footer-col h4{ font-family: var(--font-mono); font-size:11.5px; letter-spacing:.1em; text-transform:uppercase; color:#8f8878; margin:0 0 18px; font-weight:500; }
.footer-col p{ margin:0 0 10px; font-size:14px; }
.footer-col a:hover{ color:var(--red-light); }
.footer-bottom{ max-width: var(--container); margin:0 auto; padding: 22px var(--edge); font-size:12.5px; color:#7a7365; }
@media (max-width: 860px){ .footer-inner{ grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px){ .footer-inner{ grid-template-columns: 1fr; } }

/* ============ REVEAL ANIMATION ============ */
.reveal{ opacity:0; transform: translateY(16px); transition: opacity .7s ease, transform .7s ease; }
.reveal.in{ opacity:1; transform:none; }