/* ==========================================================================
   AVAR KINNISVARA — Light-primary real estate demo site
   Design tokens, base, components
   ========================================================================== */

:root {
  /* colors */
  --bg:         #FAFAF8;   /* warm white — primary bg */
  --bg-2:       #F2EFE9;   /* warm grey for alternating sections */
  --dark:       #111110;   /* near-black dark sections */
  --dark-2:     #1C1B19;
  --text:       #111110;
  --muted:      #6B6862;
  --faint:      #9A9690;
  --accent:     #C4703A;   /* copper */
  --accent-lt:  #D98A56;
  --line:       #E4E0D8;
  --line-dark:  rgba(255,255,255,0.10);
  --white:      #FFFFFF;

  /* type */
  --sans: "Plus Jakarta Sans", system-ui, -apple-system, sans-serif;

  /* spacing */
  --pad:    clamp(1.25rem, 5vw, 4rem);
  --section: clamp(5rem, 10vw, 9rem);
  --maxw:   1280px;

  /* misc */
  --radius:    4px;
  --radius-lg: 10px;
  --ease:      cubic-bezier(.22,.61,.36,1);
  --shadow-sm: 0 1px 3px rgba(17,17,16,.06), 0 8px 24px -16px rgba(17,17,16,.16);
  --shadow-md: 0 4px 16px -4px rgba(17,17,16,.12), 0 24px 48px -24px rgba(17,17,16,.20);
  --shadow-lg: 0 24px 60px -24px rgba(17,17,16,.28);
}

/* ---- reset & base ---- */
*, *::before, *::after { box-sizing: border-box }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100% }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto } }

body {
  margin: 0;
  font-family: var(--sans);
  background: var(--bg);
  color: var(--text);
  font-size: clamp(1rem, .95rem + .25vw, 1.0625rem);
  line-height: 1.7;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img { display: block; max-width: 100% }
a { color: inherit; text-decoration: none }
button { font-family: inherit }

/* ---- layout ---- */
.container { max-width: var(--maxw); margin-inline: auto; padding-inline: var(--pad) }
.section { padding-block: var(--section) }

/* ---- typography ---- */
.eyebrow {
  font-size: .74rem; font-weight: 600; letter-spacing: .22em; text-transform: uppercase;
  color: var(--accent); display: inline-flex; align-items: center; gap: .85rem; margin: 0 0 1.4rem;
}
.eyebrow::before { content: ""; width: 26px; height: 1px; background: var(--accent); opacity: .7 }
.eyebrow.center { justify-content: center }
.eyebrow.on-dark { color: var(--accent-lt) }
.eyebrow.on-dark::before { background: var(--accent-lt) }

h1, h2, h3, h4 { margin: 0; font-weight: 700; letter-spacing: -.025em; line-height: 1.1; color: var(--text) }
.display {
  font-size: clamp(2.6rem, 1.6rem + 4vw, 5.4rem);
  line-height: 1.04; letter-spacing: -.04em; font-weight: 700;
  color: var(--text);
}
.h2 { font-size: clamp(1.9rem, 1.3rem + 2.4vw, 3.2rem); letter-spacing: -.03em }
.h3 { font-size: clamp(1.2rem, 1.05rem + .55vw, 1.45rem); font-weight: 600; letter-spacing: -.015em }
.lead { font-size: clamp(1.05rem, 1rem + .3vw, 1.2rem); line-height: 1.65; color: var(--muted); font-weight: 400 }
.measure { max-width: 52ch }

/* ---- buttons ---- */
.btn {
  display: inline-flex; align-items: center; gap: .7rem;
  font-size: .9rem; font-weight: 600; letter-spacing: .01em;
  padding: 1rem 1.8rem; border-radius: var(--radius); border: 1.5px solid transparent;
  cursor: pointer; transition: transform .45s var(--ease), box-shadow .45s var(--ease), background .3s, color .3s, border-color .3s;
  will-change: transform;
}
.btn .ar { transition: transform .45s var(--ease) }
.btn:hover { transform: translateY(-2px); box-shadow: var(--shadow-md) }
.btn:hover .ar { transform: translateX(5px) }

.btn--copper { background: var(--accent); border-color: var(--accent); color: #fff }
.btn--copper:hover { background: var(--accent-lt); border-color: var(--accent-lt) }

.btn--outline { background: transparent; border-color: var(--line); color: var(--text) }
.btn--outline:hover { border-color: var(--text); box-shadow: none }

.btn--light { background: transparent; color: #F8F7F3; border-color: rgba(248,247,243,.35) }
.btn--light:hover { background: rgba(248,247,243,.12); box-shadow: none }

.btn--full { width: 100%; justify-content: center }

.textlink {
  display: inline-flex; align-items: center; gap: .5rem; font-weight: 600; font-size: .9rem;
  color: var(--text); position: relative; padding-bottom: 2px;
}
.textlink::after {
  content: ""; position: absolute; left: 0; bottom: 0; height: 1px; width: 100%;
  background: var(--accent); transform: scaleX(0); transform-origin: left; transition: transform .4s var(--ease);
}
.textlink:hover::after { transform: scaleX(1) }
.textlink .ar { transition: transform .4s var(--ease) }
.textlink:hover .ar { transform: translateX(4px) }

/* ---- head block ---- */
.head { display: grid; grid-template-columns: 1fr; gap: 1.2rem; margin-bottom: clamp(2.8rem, 5vw, 4.2rem) }
.head--split { grid-template-columns: 1.1fr .9fr; align-items: end; gap: 2rem }
.head p { margin: 0 }
@media (max-width: 780px) { .head--split { grid-template-columns: 1fr } }

/* ==========================================================================
   DEMO BANNER
   ========================================================================== */
.demo-banner {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  background: #F2EFE9; color: #111110;
  text-align: center; padding: .58rem 1rem;
  font-size: .78rem; font-family: system-ui, sans-serif; letter-spacing: .025em;
  border-bottom: 1px solid #E4E0D8;
}
.demo-banner a { color: var(--accent); text-decoration: underline }

/* ==========================================================================
   NAV
   ========================================================================== */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 60;
  display: flex; align-items: center; justify-content: space-between;
  padding: 1.3rem var(--pad);
  transition: background .5s var(--ease), box-shadow .5s var(--ease), padding .5s var(--ease), border-color .5s;
  border-bottom: 1px solid transparent;
}
.nav.scrolled {
  background: rgba(250,250,248,.92); backdrop-filter: blur(14px);
  border-bottom-color: var(--line); padding-block: .9rem;
}
.brand {
  display: flex; align-items: center; gap: .65rem;
  font-weight: 700; letter-spacing: .01em; font-size: .95rem;
  color: var(--text); transition: color .4s;
}
.brand .mark { width: 28px; height: 28px; flex: none; color: var(--text) }
.nav-links { display: flex; align-items: center; gap: 2rem }
.nav-links a {
  font-size: .9rem; font-weight: 500; color: var(--muted);
  transition: color .3s; position: relative; padding-block: .3rem;
}
.nav-links a::after {
  content: ""; position: absolute; left: 0; bottom: -2px; height: 1px; width: 100%;
  background: var(--accent); transform: scaleX(0); transform-origin: left; transition: transform .35s var(--ease);
}
.nav-links a:hover { color: var(--text) }
.nav-links a:hover::after { transform: scaleX(1) }
.nav-cta { display: flex; align-items: center; gap: 1rem }
.nav .btn { padding: .68rem 1.25rem; font-size: .84rem }

.burger {
  display: none; flex-direction: column; gap: 5px;
  width: 34px; height: 34px; background: none; border: 0;
  cursor: pointer; align-items: flex-end; justify-content: center;
}
.burger span { display: block; height: 1.5px; width: 26px; background: var(--text); transition: .4s var(--ease) }
.burger span:nth-child(2) { width: 18px }
.burger.open span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); width: 26px }
.burger.open span:nth-child(2) { opacity: 0; width: 26px }
.burger.open span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg) }

/* mobile menu */
.mobile-menu {
  position: fixed; inset: 0; z-index: 55;
  background: var(--dark); color: #F8F7F3;
  display: flex; flex-direction: column; justify-content: center; padding: var(--pad);
  transform: translateY(-100%); transition: transform .6s var(--ease); visibility: hidden;
}
.mobile-menu.open { transform: translateY(0); visibility: visible }
.mobile-menu a {
  font-size: clamp(1.8rem, 8vw, 2.5rem); font-weight: 700; letter-spacing: -.03em;
  padding: .55rem 0; border-bottom: 1px solid rgba(248,247,243,.1);
  display: flex; justify-content: space-between; align-items: center; color: #F8F7F3;
}
.mobile-menu a .n { font-size: .78rem; color: var(--accent-lt); font-weight: 600 }
.mobile-menu .mm-foot {
  margin-top: 2.5rem; display: flex; flex-direction: column; gap: .4rem;
  color: rgba(248,247,243,.55); font-size: .9rem;
}

/* ==========================================================================
   HERO (light)
   ========================================================================== */
.hero {
  background: var(--bg-2);
  min-height: 100svh;
  display: flex; align-items: center;
  padding-top: calc(var(--demo-h, 38px) + 80px);
  padding-bottom: clamp(3rem, 6vw, 5rem);
}
.hero__inner {
  display: grid;
  grid-template-columns: 55fr 45fr;
  gap: clamp(2.5rem, 5vw, 5rem);
  align-items: center;
}
.hero__text { display: flex; flex-direction: column; gap: 0 }
.hero__text .eyebrow { margin-bottom: 1.2rem }
.hero__text .display { margin-bottom: 1.4rem }
.hero__text .lead { margin-bottom: 2.2rem; max-width: 46ch }
.hero__cta { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; margin-bottom: 2.6rem }
.hero__link { color: var(--text); font-size: 1rem }
.hero__stats { display: flex; gap: 1rem; flex-wrap: wrap }
.stat-chip {
  display: flex; align-items: baseline; gap: .4rem;
  background: var(--white); border: 1px solid var(--line);
  border-radius: 100px; padding: .55rem 1.1rem;
  box-shadow: var(--shadow-sm);
}
.stat-chip b { font-size: 1.05rem; font-weight: 700; color: var(--text) }
.stat-chip span { font-size: .82rem; color: var(--muted) }
.stat-chip .star { color: var(--accent); font-style: normal }

.hero__photo {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  aspect-ratio: 4/5;
  box-shadow: var(--shadow-lg);
}
.hero__photo img { width: 100%; height: 100%; object-fit: cover }
.hero__photo-badge {
  position: absolute; bottom: 1.4rem; left: 1.4rem;
  background: rgba(250,250,248,.95); backdrop-filter: blur(10px);
  border: 1px solid var(--line); border-radius: 100px;
  padding: .55rem 1rem; font-size: .82rem; font-weight: 600;
  display: flex; align-items: center; gap: .5rem; color: var(--text);
}
.hero__photo-badge svg { color: var(--accent) }

@media (max-width: 860px) {
  .hero__inner { grid-template-columns: 1fr }
  .hero { min-height: auto; padding-bottom: 4rem }
  .hero__photo { aspect-ratio: 16/10; max-height: 380px }
}

/* ==========================================================================
   TRUST BAR
   ========================================================================== */
.trust { background: var(--white); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line) }
.trust__grid {
  display: grid; grid-template-columns: repeat(4, 1fr);
  divide-color: var(--line);
}
.trust__item {
  display: flex; align-items: center; gap: 1.1rem;
  padding: clamp(1.8rem, 3.5vw, 2.8rem) clamp(1.25rem, 3vw, 2.2rem);
  border-left: 1px solid var(--line);
}
.trust__item:first-child { border-left: 0 }
.trust__item svg { color: var(--accent); flex: none }
.trust__item b { display: block; font-size: 1rem; font-weight: 700; color: var(--text) }
.trust__item span { font-size: .84rem; color: var(--muted) }

@media (max-width: 860px) {
  .trust__grid { grid-template-columns: repeat(2, 1fr) }
  .trust__item:nth-child(3) { border-left: 0 }
}
@media (max-width: 480px) {
  .trust__grid { grid-template-columns: 1fr }
  .trust__item { border-left: 0; border-top: 1px solid var(--line) }
  .trust__item:first-child { border-top: 0 }
}

/* ==========================================================================
   LISTINGS (objektid)
   ========================================================================== */
.listings { background: var(--bg-2) }
.listings__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(1rem, 2vw, 1.5rem);
}
.listings__more { text-align: center; margin-top: 2.8rem }

/* property card */
.prop-card {
  background: var(--white); border-radius: var(--radius-lg);
  border: 1px solid var(--line); overflow: hidden;
  display: flex; flex-direction: column;
  transition: transform .5s var(--ease), box-shadow .5s var(--ease), border-color .5s;
  cursor: pointer;
}
.prop-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); border-color: transparent }
.prop-card:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px }

.prop-card__img {
  position: relative; aspect-ratio: 4/3; overflow: hidden; flex: none;
}
.prop-card__img img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 1s var(--ease);
}
.prop-card:hover .prop-card__img img { transform: scale(1.05) }

.prop-tag {
  position: absolute; top: 1rem; left: 1rem;
  font-size: .72rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  padding: .32rem .72rem; border-radius: 100px;
}
.prop-tag--sale { background: var(--accent); color: #fff }
.prop-tag--rent { background: #2D6A4F; color: #fff }

.prop-loc {
  position: absolute; bottom: 1rem; left: 1rem;
  background: rgba(250,250,248,.92); backdrop-filter: blur(8px);
  border: 1px solid rgba(228,224,216,.7); border-radius: 100px;
  padding: .3rem .75rem; font-size: .78rem; font-weight: 600; color: var(--text);
  display: flex; align-items: center; gap: .4rem;
}
.prop-loc svg { color: var(--accent) }

.prop-card__body { padding: 1.4rem 1.5rem 1.6rem; display: flex; flex-direction: column; flex: 1 }
.prop-card__body h3 { font-size: 1.05rem; margin-bottom: .75rem; line-height: 1.3 }

.prop-meta { display: flex; gap: 1rem; margin-bottom: 1rem }
.prop-meta span {
  display: flex; align-items: center; gap: .4rem;
  font-size: .84rem; color: var(--muted);
}
.prop-meta svg { color: var(--accent); flex: none }

.prop-price { font-size: 1.25rem; font-weight: 700; color: var(--text); margin-bottom: 1.2rem }
.prop-price__unit { font-size: .85rem; font-weight: 500; color: var(--muted) }

.prop-link {
  margin-top: auto;
  font-size: .88rem; font-weight: 600; color: var(--accent);
  display: inline-flex; align-items: center; gap: .4rem;
  transition: gap .3s var(--ease);
}
.prop-card:hover .prop-link { gap: .7rem }

@media (max-width: 1060px) { .listings__grid { grid-template-columns: repeat(2, 1fr) } }
@media (max-width: 560px) { .listings__grid { grid-template-columns: 1fr } }

/* ==========================================================================
   SERVICES (dark)
   ========================================================================== */
.services { background: var(--dark); color: #F8F7F3 }
.services .h2 { color: #F8F7F3 }

.svc-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1rem, 2vw, 1.5rem);
  margin-top: 0;
}
.svc-card {
  background: var(--dark-2); border: 1px solid var(--line-dark);
  border-radius: var(--radius-lg); padding: 2rem 2rem 2.2rem;
  display: flex; flex-direction: column; gap: 1rem;
  transition: border-color .4s, box-shadow .4s;
}
.svc-card:hover { border-color: rgba(196,112,58,.4); box-shadow: 0 0 0 1px rgba(196,112,58,.15) }
.svc-card--wide { grid-column: 1 / -1 }
.svc-card--wide .svc-card__wide-inner {
  display: flex; align-items: center; justify-content: space-between; gap: 2rem; flex-wrap: wrap;
}
.svc-card--wide h3, .svc-card--wide p { margin-bottom: 0 }
.svc-card__icon {
  width: 48px; height: 48px; border-radius: var(--radius);
  background: rgba(196,112,58,.15); border: 1px solid rgba(196,112,58,.25);
  display: grid; place-items: center; color: var(--accent-lt);
}
.svc-card h3 { color: #F8F7F3; font-size: 1.15rem; font-weight: 600; letter-spacing: -.01em }
.svc-card p { margin: 0; font-size: .95rem; color: rgba(248,247,243,.65); line-height: 1.65 }
.svc-list {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: .55rem;
  margin-top: auto;
}
.svc-list li {
  font-size: .87rem; color: rgba(248,247,243,.55);
  padding-left: 1.2rem; position: relative;
}
.svc-list li::before { content: "—"; position: absolute; left: 0; color: var(--accent); font-weight: 700 }
.svc-card__cta { flex: none }

@media (max-width: 860px) { .svc-grid { grid-template-columns: 1fr } .svc-card--wide { grid-column: span 1 } }

/* ==========================================================================
   PROCESS
   ========================================================================== */
.process { background: var(--bg) }
.process__grid {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 0; margin-top: clamp(2.5rem, 5vw, 4rem);
  border-top: 2px solid var(--line);
}
.pstep { padding: 2.4rem 1.8rem 2.4rem 0; position: relative }
.pstep:not(:last-child) { padding-right: 2rem }
.pstep__num {
  font-size: .78rem; font-weight: 700; letter-spacing: .18em; color: var(--accent);
  margin-bottom: 2.2rem; display: block;
}
.pstep h3 { font-size: 1.25rem; font-weight: 700; margin-bottom: .7rem; color: var(--text) }
.pstep p { font-size: .94rem; color: var(--muted); line-height: 1.62; margin: 0 }
.pstep__connector {
  position: absolute; top: -2px; left: 0; width: calc(100% - 1.5rem);
  height: 2px; background: var(--accent);
}
.pstep:last-child .pstep__connector { width: 100% }

@media (max-width: 860px) {
  .process__grid { grid-template-columns: 1fr 1fr }
  .pstep { padding-right: 1.5rem !important }
  .pstep:nth-child(3) { border-top: 2px solid var(--line); margin-top: 0 }
}
@media (max-width: 520px) {
  .process__grid { grid-template-columns: 1fr }
  .pstep { border-top: 2px solid var(--line); padding-right: 0 !important }
  .pstep:first-child { border-top: none }
  .pstep__connector { display: none }
}

/* ==========================================================================
   TEAM
   ========================================================================== */
.team { background: var(--white) }
.team__grid {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: clamp(1rem, 2vw, 1.5rem);
}
.agent-card {
  background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius-lg);
  overflow: hidden; display: flex; flex-direction: column;
  transition: transform .5s var(--ease), box-shadow .5s var(--ease);
}
.agent-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md) }
.agent-card__photo { aspect-ratio: 3/4; overflow: hidden }
.agent-card__photo img { width: 100%; height: 100%; object-fit: cover; object-position: top; transition: transform 1s var(--ease) }
.agent-card:hover .agent-card__photo img { transform: scale(1.04) }
.agent-card__body {
  padding: 1.4rem 1.5rem 1.6rem;
  display: flex; flex-direction: column; gap: .25rem;
}
.agent-card__body h3 { font-size: 1.05rem; font-weight: 700; margin-bottom: .1rem }
.agent-title { font-size: .84rem; font-weight: 600; color: var(--accent) }
.agent-spec { font-size: .84rem; color: var(--muted) }
.agent-phone {
  margin-top: .8rem; display: inline-flex; align-items: center; gap: .5rem;
  font-size: .85rem; font-weight: 600; color: var(--text);
  border-top: 1px solid var(--line); padding-top: .8rem;
  transition: color .3s;
}
.agent-phone:hover { color: var(--accent) }
.agent-phone svg { color: var(--accent) }

@media (max-width: 900px) { .team__grid { grid-template-columns: repeat(2, 1fr) } }
@media (max-width: 480px) { .team__grid { grid-template-columns: 1fr } }

/* ==========================================================================
   REVIEWS
   ========================================================================== */
.reviews { background: var(--bg-2) }
.tgrid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.2rem, 2vw, 1.8rem);
}
.tcard {
  background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: clamp(1.8rem, 3vw, 2.4rem);
  display: flex; flex-direction: column; gap: 1.2rem;
  transition: transform .5s var(--ease), box-shadow .5s var(--ease);
}
.tcard:hover { transform: translateY(-4px); box-shadow: var(--shadow-md) }
.tcard .stars { color: var(--accent); letter-spacing: .14em; font-size: .95rem }
.tcard blockquote { margin: 0; font-size: 1.03rem; line-height: 1.65; color: var(--text) }
.tcard .who { display: flex; align-items: center; gap: .85rem; margin-top: auto; padding-top: .4rem }
.av {
  width: 44px; height: 44px; border-radius: 50%; background: var(--accent); color: #fff; flex: none;
  display: grid; place-items: center; font-weight: 700; font-size: .88rem;
}
.who .nm { font-weight: 700; font-size: .95rem; color: var(--text) }
.who .rl { font-size: .82rem; color: var(--muted) }

@media (max-width: 880px) { .tgrid { grid-template-columns: 1fr } .tcard:nth-child(n+2) { display: none } }
.tgrid.show-all .tcard { display: flex }

/* ==========================================================================
   CONTACT (dark)
   ========================================================================== */
.contact { background: var(--dark) }
.contact__grid {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: clamp(3rem, 7vw, 7rem); align-items: start;
}
.contact__left .h2 { margin-bottom: 1.4rem }
.contact__sub { color: rgba(248,247,243,.65); font-size: 1rem; line-height: 1.65; margin-bottom: 2rem }
.contact__info {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: .95rem;
}
.contact__info li {
  display: flex; align-items: center; gap: .85rem;
  font-size: .95rem; color: rgba(248,247,243,.75);
}
.contact__info li svg { color: var(--accent); flex: none }
.contact__info a { color: rgba(248,247,243,.75); transition: color .3s }
.contact__info a:hover { color: var(--accent-lt) }

.contact__map { margin-top: 2rem }
.map-placeholder {
  background: rgba(255,255,255,.05); border: 1px solid var(--line-dark);
  border-radius: var(--radius-lg); height: 160px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: .6rem; color: rgba(248,247,243,.45); font-size: .9rem;
}
.map-placeholder svg { color: var(--accent); opacity: .7 }

/* form */
.contact__right { background: var(--bg); border-radius: var(--radius-lg); padding: clamp(1.8rem, 3vw, 2.6rem) }
.contact-form { display: flex; flex-direction: column; gap: 1.1rem }
.form-group { display: flex; flex-direction: column; gap: .5rem }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem }
label { font-size: .84rem; font-weight: 600; color: var(--text) }
input, textarea, select {
  font-family: var(--sans); font-size: .95rem; color: var(--text);
  background: var(--white); border: 1.5px solid var(--line); border-radius: var(--radius);
  padding: .8rem 1rem; width: 100%; outline: none;
  transition: border-color .3s, box-shadow .3s;
}
input:focus, textarea:focus, select:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(196,112,58,.12) }
input::placeholder, textarea::placeholder { color: var(--faint) }
textarea { resize: vertical; min-height: 100px }
.select-wrap { position: relative }
.select-wrap select { appearance: none; cursor: pointer; padding-right: 2.5rem }
.select-arrow { position: absolute; right: 1rem; top: 50%; transform: translateY(-50%); pointer-events: none; color: var(--muted) }
.form-note { font-size: .8rem; color: var(--muted); text-align: center; margin: 0 }

.form-success {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; gap: 1rem; padding: 3rem 2rem;
}
.form-success svg { color: var(--accent) }
.form-success h3 { font-size: 1.3rem; color: var(--text) }
.form-success p { color: var(--muted); margin: 0 }

@media (max-width: 860px) {
  .contact__grid { grid-template-columns: 1fr }
  .form-row { grid-template-columns: 1fr }
}

/* ==========================================================================
   FOOTER
   ========================================================================== */
.footer { background: var(--dark-2); color: rgba(248,247,243,.65); padding-top: clamp(4rem, 7vw, 6rem) }
.footer__top { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.2fr; gap: 2.5rem; padding-bottom: 3.5rem }
.footer .brand { color: #F8F7F3; margin-bottom: 1.2rem }
.footer__about { font-size: .93rem; line-height: 1.68; max-width: 34ch; color: rgba(248,247,243,.55) }
.fcol h4 {
  font-size: .74rem; letter-spacing: .2em; text-transform: uppercase;
  color: var(--accent-lt); font-weight: 600; margin: 0 0 1.2rem;
}
.fcol ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .8rem }
.fcol a, .fcol li { font-size: .93rem; color: rgba(248,247,243,.65); transition: color .3s }
.fcol a:hover { color: #fff }
.fcol .contact-row { display: flex; flex-direction: column; gap: .18rem }
.fcol .contact-row span:first-child { font-size: .74rem; color: rgba(248,247,243,.36); letter-spacing: .06em; text-transform: uppercase }
.socials { display: flex; gap: .65rem; margin-top: 1.5rem }
.socials a {
  width: 38px; height: 38px; border: 1px solid rgba(248,247,243,.15); border-radius: 50%;
  display: grid; place-items: center; color: rgba(248,247,243,.65);
  transition: background .35s, border-color .35s, color .35s, transform .35s var(--ease);
}
.socials a:hover { background: var(--accent); border-color: var(--accent); color: #fff; transform: translateY(-2px) }
.socials svg { width: 16px; height: 16px }
.footer__bottom {
  border-top: 1px solid rgba(248,247,243,.1); padding-block: 1.8rem;
  display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap;
  font-size: .82rem; color: rgba(248,247,243,.38);
}
.footer__bottom .reg { display: flex; gap: 1.5rem; flex-wrap: wrap }

@media (max-width: 900px) { .footer__top { grid-template-columns: 1fr 1fr } }
@media (max-width: 520px) { .footer__top { grid-template-columns: 1fr } }

/* ==========================================================================
   SCROLL REVEAL
   ========================================================================== */
html.anim .reveal { opacity: 0; transform: translateY(24px); transition: opacity .9s var(--ease), transform .9s var(--ease) }
html.anim .reveal.in { opacity: 1; transform: none }
html.anim .reveal[data-d="1"] { transition-delay: .08s }
html.anim .reveal[data-d="2"] { transition-delay: .16s }
html.anim .reveal[data-d="3"] { transition-delay: .24s }
html.anim .reveal[data-d="4"] { transition-delay: .32s }

@media (prefers-reduced-motion: reduce) {
  html.anim .reveal { opacity: 1 !important; transform: none !important }
}

/* ==========================================================================
   RESPONSIVE NAV
   ========================================================================== */
@media (max-width: 880px) {
  .nav-links { display: none }
  .nav .nav-cta .btn--copper { display: none }
  .burger { display: flex }
}