/* ============================================================
   Terraforno — Website UI Kit component styles
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--fg-1);
  background: var(--bg);
  font-size: var(--t-body);
  line-height: 1.65;
}
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
::selection { background: var(--tf-flame); color: var(--tf-charcoal); }

/* ---------- Layout ---------- */
.tf-wrap { width: 100%; max-width: 1240px; margin-inline: auto; padding-inline: clamp(20px, 5vw, 56px); }
.tf-wrap--narrow { max-width: 880px; }
.tf-section { padding-block: clamp(64px, 9vw, 128px); }
.tf-section--tight { padding-block: clamp(48px, 6vw, 80px); }
.tf-eyebrow-row { display: flex; align-items: center; gap: 10px; margin-bottom: 18px; }
.tf-eyebrow-row::before { content: ""; width: 26px; height: 1.5px; background: var(--accent); display: block; }

/* ---------- Buttons ---------- */
.tf-btn {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--font-body); font-weight: 600; font-size: var(--t-sm);
  letter-spacing: .01em; line-height: 1; cursor: pointer;
  border: 1.5px solid transparent; border-radius: var(--r-pill);
  padding: 15px 26px; transition: all .22s cubic-bezier(.2,.7,.3,1);
  white-space: nowrap; text-align: center;
}
.tf-btn svg { transition: transform .25s cubic-bezier(.2,.7,.3,1); }
.tf-btn--primary { background: var(--accent); color: var(--accent-fg); box-shadow: var(--sh-2); }
.tf-btn--primary:hover { background: var(--accent-hover); box-shadow: var(--sh-glow); transform: translateY(-1px); }
.tf-btn--primary:active { transform: translateY(0) scale(.985); }
.tf-btn--primary:hover svg.tf-arr { transform: translateX(4px); }
.tf-btn--outline { background: transparent; color: var(--fg-1); border-color: var(--border-strong); }
.tf-btn--outline:hover { border-color: var(--accent); color: var(--accent); }
.tf-btn--ghost { background: transparent; color: var(--fg-1); padding: 10px 4px; border-radius: 0; }
.tf-btn--ghost:hover { color: var(--accent); }
.tf-btn--ghost:hover svg.tf-arr { transform: translateX(4px); }
.tf-btn--lg { padding: 18px 32px; font-size: var(--t-body); }
.tf-btn--block { display: flex; width: 100%; justify-content: center; }

/* ---------- Eyebrow / pills ---------- */
.tf-pill {
  display: inline-flex; align-items: center; gap: 7px; white-space: nowrap;
  font-size: var(--t-xs); font-weight: 600; letter-spacing: .04em;
  padding: 6px 13px; border-radius: var(--r-pill);
  border: 1px solid var(--border-strong); color: var(--fg-2); background: color-mix(in srgb, var(--surface) 60%, transparent);
}
.tf-pill--accent { background: color-mix(in srgb, var(--accent) 14%, transparent); border-color: color-mix(in srgb, var(--accent) 40%, transparent); color: var(--accent); }

/* ---------- Photo placeholder ---------- */
.tf-photo {
  position: relative; overflow: hidden; border-radius: var(--r-lg);
  background: var(--tf-espresso);
  display: grid; place-items: center; isolation: isolate;
  border: 1px solid color-mix(in srgb, var(--tf-bark) 60%, transparent);
}
.tf-photo::before {
  content: ""; position: absolute; inset: 0; z-index: -2;
  background: linear-gradient(150deg, var(--tf-bark), var(--tf-espresso) 55%, var(--tf-charcoal));
}
.tf-photo::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: radial-gradient(90% 70% at 50% 118%, rgba(232,122,62,.55), rgba(154,59,30,.12) 45%, transparent 70%);
}
.tf-photo--clay { background: var(--tf-clay); }
.tf-photo--clay::before { background: linear-gradient(150deg, var(--tf-tan), var(--tf-clay) 60%, var(--tf-bark)); }
.tf-photo--clay::after { background: radial-gradient(80% 60% at 50% 115%, rgba(154,59,30,.4), transparent 65%); }
.tf-photo--cream { background: var(--tf-oat); }
.tf-photo--cream::before { background: linear-gradient(150deg, var(--tf-parchment), var(--tf-oat) 60%, var(--tf-tan)); }
.tf-photo--cream::after { background: radial-gradient(80% 60% at 50% 115%, rgba(199,93,52,.22), transparent 65%); }
.tf-photo__label {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  color: color-mix(in srgb, var(--tf-spark) 75%, transparent);
  font-size: var(--t-xs); letter-spacing: .14em; text-transform: uppercase; font-weight: 600;
  text-align: center; padding: 16px;
}
.tf-photo--clay .tf-photo__label, .tf-photo--cream .tf-photo__label { color: color-mix(in srgb, var(--tf-espresso) 70%, transparent); }
.tf-photo__label svg { opacity: .8; }
.tf-grain {
  position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: .5; 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='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
}

/* ---------- Cards ---------- */
.tf-card {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg);
  overflow: hidden; transition: transform .3s cubic-bezier(.2,.7,.3,1), box-shadow .3s, border-color .3s;
}
.tf-card--link { cursor: pointer; }
.tf-card--link:hover { transform: translateY(-4px); box-shadow: var(--sh-3); border-color: var(--border-strong); }

/* ---------- Divider ---------- */
.tf-rule { height: 1px; background: var(--border); border: 0; }

/* ---------- Header / nav ---------- */
.tf-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  backdrop-filter: saturate(1.1) blur(10px);
  transition: background .3s, border-color .3s;
}
.tf-header__inner { display: flex; align-items: center; justify-content: space-between; height: 74px; }
.tf-nav { display: flex; align-items: center; gap: 30px; }
.tf-nav a { font-size: var(--t-sm); font-weight: 500; color: var(--fg-2); transition: color .2s; position: relative; cursor: pointer; }
.tf-nav a:hover, .tf-nav a.is-active { color: var(--fg-1); }
.tf-nav a.is-active::after { content:""; position:absolute; left:0; right:0; bottom:-6px; height:1.5px; background: var(--accent); }
.tf-logo { display: flex; align-items: center; gap: 11px; cursor: pointer; }
.tf-logo__mark { width: 34px; height: 34px; flex: none; }
.tf-logo__word { font-family: var(--font-display); font-weight: 600; font-size: 1.45rem; letter-spacing: .01em; line-height: 1; }
.tf-logo__word small { display:block; font-family: var(--font-body); font-weight:600; font-size: .5rem; letter-spacing: .42em; text-transform: uppercase; color: var(--fg-3); margin-top: 3px; }

/* ---------- Footer ---------- */
.tf-footer { background: var(--tf-charcoal); color: #E7D8C2; }
.tf-footer a { color: #C3B097; font-size: var(--t-sm); transition: color .2s; }
.tf-footer a:hover { color: var(--tf-flame); }

/* ---------- Spec list ---------- */
.tf-spec { display: grid; grid-template-columns: repeat(2,1fr); gap: 1px; background: var(--border); border:1px solid var(--border); border-radius: var(--r-md); overflow:hidden; }
.tf-spec__cell { background: var(--bg); padding: 16px 18px; }
.tf-spec__k { font-size: var(--t-xs); letter-spacing:.08em; text-transform: uppercase; color: var(--fg-3); margin-bottom: 5px; }
.tf-spec__v { font-family: var(--font-display); font-size: 1.3rem; font-weight: 600; color: var(--fg-1); }

/* ---------- Marquee ---------- */
.tf-marquee { overflow: hidden; white-space: nowrap; }
.tf-marquee__track { display: inline-flex; gap: 48px; align-items: center; animation: tf-scroll 26s linear infinite; }
.tf-marquee__track span { font-family: var(--font-display); font-style: italic; font-size: 1.4rem; color: var(--fg-3); display:inline-flex; align-items:center; gap:48px; }
@keyframes tf-scroll { to { transform: translateX(-50%); } }

/* ---------- Gallery ---------- */
.tf-gfilter { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: clamp(28px, 4vw, 44px); }
.tf-chip {
  display: inline-flex; align-items: center; gap: 8px; cursor: pointer;
  font-family: var(--font-body); font-weight: 600; font-size: var(--t-sm);
  padding: 10px 18px; border-radius: var(--r-pill);
  border: 1.5px solid var(--border-strong); background: transparent; color: var(--fg-2);
  transition: all .22s cubic-bezier(.2,.7,.3,1);
}
.tf-chip:hover { border-color: var(--accent); color: var(--accent); }
.tf-chip.is-on { background: var(--accent); border-color: var(--accent); color: var(--accent-fg); }
.tf-chip__n { font-size: var(--t-xs); opacity: .7; font-variant-numeric: tabular-nums; }
.tf-chip.is-on .tf-chip__n { opacity: .85; }

.tf-ggrid { display: grid; grid-template-columns: repeat(var(--gallery-cols, 3), 1fr); gap: 18px; }
@media (max-width: 860px) { .tf-ggrid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 540px) { .tf-ggrid { grid-template-columns: 1fr; } }

.tf-gtile {
  position: relative; display: block; width: 100%; padding: 0; border: 0; cursor: pointer;
  background: var(--tf-espresso); border-radius: var(--r-lg); overflow: hidden;
  transition: transform .35s cubic-bezier(.2,.7,.3,1), box-shadow .35s;
}
.tf-gtile:hover { transform: translateY(-4px); box-shadow: var(--sh-3); }
.tf-gtile .tf-photo { transition: transform .5s cubic-bezier(.2,.7,.3,1); }
.tf-gtile:hover .tf-photo { transform: scale(1.04); }
.tf-gtile__scrim {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to top, rgba(16,11,6,.78), rgba(16,11,6,.06) 52%, transparent);
  opacity: .85; transition: opacity .35s;
}
.tf-gtile:hover .tf-gtile__scrim { opacity: 1; }
.tf-gtile__meta {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 18px 18px 20px;
  display: flex; flex-direction: column; gap: 5px; text-align: left;
  transform: translateY(6px); transition: transform .35s cubic-bezier(.2,.7,.3,1);
}
.tf-gtile:hover .tf-gtile__meta { transform: translateY(0); }
.tf-gtile__cap { font-family: var(--font-display); font-weight: 600; font-size: 1.18rem; line-height: 1.15; color: #FBF3E6; }
.tf-gtile__place { display: inline-flex; align-items: center; gap: 6px; font-size: var(--t-xs); letter-spacing: .04em; color: var(--tf-spark); opacity: .82; }
.tf-gtile__expand {
  position: absolute; top: 14px; right: 14px; width: 38px; height: 38px; border-radius: 50%;
  display: grid; place-items: center; color: #FBF3E6;
  background: rgba(40,27,17,.5); border: 1px solid rgba(246,236,221,.25); backdrop-filter: blur(4px);
  opacity: 0; transform: scale(.85); transition: all .3s cubic-bezier(.2,.7,.3,1);
}
.tf-gtile:hover .tf-gtile__expand { opacity: 1; transform: scale(1); }

.tf-lb-nav:hover { background: var(--accent) !important; border-color: var(--accent) !important; transform: scale(1.06); }
@media (max-width: 640px) { .tf-lb-nav { display: none !important; } }

/* ---------- Reveal on scroll ---------- */
.tf-reveal { opacity: 0; transform: translateY(22px); transition: opacity .7s ease, transform .7s cubic-bezier(.2,.7,.3,1); }
.tf-reveal.is-in { opacity: 1; transform: none; }

.tf-burger { display: none; }
@media (max-width: 860px) {
  .tf-nav { display: none; }
  .tf-cta-desktop { display: none; }
  .tf-burger { display: inline-flex; }
  .tf-spec { grid-template-columns: 1fr 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .tf-reveal { opacity: 1; transform: none; transition: none; }
  .tf-marquee__track { animation: none; }
}