/* YFS homepage uplift (English and Spanish). Loads after v2.css: it swaps the color tokens for a dark graphite
   page, keeps the brand fonts (Archivo, Source Sans 3) and adds the scroll and tap motion.
   Every motion rule is behind html.motion, which uplift.js sets only when the visitor hasn't asked for reduced motion. */


:root {
  --navy: #0b0d10;
  --navy-deep: #07090b;
  --paper: #111418;
  --card: #1a1f25;
  --ink: #d3d8df;
  --muted: #98a0ab;
  --line: #2a313a;
  --safety: #d4640f;
  --safety-ink: #f08030;
  --on-navy: #d3d8df;
  --on-navy-muted: #9aa2ad;
  --navy-line: #2a313a;
  --concrete: #2c333c;
  --concrete-edge: #3b444f;
  --ease: cubic-bezier(.2, .8, .2, 1);
}
html { color-scheme: dark; }
h1, h2, h3 { font-weight: 800; letter-spacing: -0.02em; }
:focus-visible { outline-color: var(--safety); }

/* ---- Buttons and form controls on dark ---- */
.btn { border-radius: 999px; }
.btn-safety:hover { background: #e8782a; color: var(--navy); }
.btn-outline { color: var(--ink); border-color: #4a5360; }
.btn-outline:hover { background: var(--ink); color: var(--navy); border-color: var(--ink); }
.field input, .field select, .field textarea, .secure-submit, .vm-close, .vm-done, .video-link { background: #0f1215; color: var(--ink); border-color: #4a5360; }
.video-link:hover { border-color: var(--ink); }
.form-result[data-state="success"] { background: #12281c; color: #8fd3a8; }
.form-result[data-state="error"] { background: #2e1513; color: #f1a7a0; }

/* ---- Header: dark glass, hides on the way down ---- */
.site-header { background: rgba(17, 20, 24, 0.82); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border-bottom-color: var(--line); transition: transform .45s var(--ease); }
.site-header.is-hidden { transform: translateY(-110%); }
.mark rect:not(:nth-child(4)) { fill: #d3d8df; }
.mark rect:nth-child(4) { fill: #d4640f; }

/* ---- Hero ---- */
.hero { background: linear-gradient(180deg, #0b0d10 0%, #111418 100%); }
.hero-row { padding-top: 56px; padding-bottom: 72px; }
.hero h1 { font-size: 42px; line-height: 44px; }
.lead { font-size: 18px; color: var(--on-navy-muted); }
.phone-frame { background: #07090b; border: 1px solid #2f3742; border-radius: 34px; padding: 12px; box-shadow: 0 40px 80px -24px rgba(0, 0, 0, .9), 0 0 0 1px rgba(255, 255, 255, .03); }
.phone-notch { background: #2a313a; }
.thread { border-radius: 24px; background: #1a1f25; }
.thread-missed { border-color: var(--line); }
.msg-cust { background: #2a313a; color: var(--ink); }
.msg-biz { background: #0b0d10; box-shadow: inset 0 0 0 1px #2a313a; }
.thread-booked { background: #2e7a4d; }
.phone-mock { will-change: transform; }

/* ---- Sections: more air, one idea per screen ---- */
.sec { padding-top: 72px; padding-bottom: 72px; }
h2 { font-size: 36px; line-height: 40px; }
.sec-head { gap: 14px; margin-bottom: 36px; }
.build, .how, .faq { background: #151a1f; border-color: var(--line); }
.card, .sys-card, .work-card, .vm-box { background: var(--card); border-color: var(--line); }
.sys-card-blueprint { background: var(--paper); border-color: #4a5360; }
.msg-pill { background: #d3d8df; color: #0b0d10; }

/* ---- Work row (moved up under the hero) ---- */
.work-sec { background: var(--paper); }
.work-sec .samples { margin-top: 0; }
.work-sec .sec { padding-top: 56px; padding-bottom: 8px; }
.samples h2 { font-size: 30px; line-height: 34px; }
.samples .sec-sub { font-size: 17px; }
.work-card { border-radius: 18px; transition: transform .45s var(--ease), box-shadow .45s var(--ease); }
.work-card:hover { border-color: var(--safety); transform: translateY(-4px); box-shadow: 0 26px 44px -26px rgba(0, 0, 0, .9); }
.work-shot { background: #0f1215; border-bottom-color: var(--line); }
.work-caption span { color: var(--muted); }
@media (max-width: 959px) {
  .work-grid { display: flex; overflow-x: auto; gap: 14px; margin-left: -16px; margin-right: -16px; padding: 4px 16px 14px; scroll-snap-type: x mandatory; scroll-padding-left: 16px; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .work-grid::-webkit-scrollbar { display: none; }
  .work-card { flex: 0 0 min(78vw, 360px); scroll-snap-align: start; }
}
@media (min-width: 720px) and (max-width: 959px) {
  .work-grid { margin-left: -32px; margin-right: -32px; padding-left: 32px; padding-right: 32px; scroll-padding-left: 32px; }
}

/* ---- Systems ---- */
.sys-card { border-radius: 16px; transition: transform .4s var(--ease); }
.sys-card:hover { border-color: #4a5360; transform: translateY(-3px); }
.sys-card h3 { font-size: 22px; }

/* ---- House: dark, builds itself on scroll, lifts on tap ---- */
.house-art { --frame: #5b6572; --seam: #3b444f; --plaster: #1f252c; }
.facade { background: var(--plaster); }
.block { color: var(--ink); transition: transform .35s var(--ease), box-shadow .35s var(--ease); }
.block:hover, .block.piece-window:hover, .block.piece-door:hover { border-color: var(--safety); }
.block.piece-wall:not([data-selected]):hover { box-shadow: inset 0 0 0 2px var(--safety); }
.block.piece-window:hover, .block.piece-door:hover, .block.piece-slab:hover, .block.piece-plan:hover { transform: translateY(-3px); box-shadow: 0 16px 26px -14px rgba(0, 0, 0, .9); }
.block:focus-visible { outline-color: var(--safety); box-shadow: 0 0 0 3px var(--paper); }
.block[data-selected]:focus-visible { box-shadow: inset 0 0 0 3px #0b0d10, 0 0 0 3px var(--paper); }
.block[data-state="selected"] { background-color: var(--safety); color: #0b0d10; border-color: var(--safety); }
.block[data-state="foundation"] { background-color: #3b444f; color: #eef1f5; border-color: #566070; }
.block[data-state="built"] { background-color: #2e7a4d; color: #fff; border-color: #2e7a4d; }
.block[data-selected] { box-shadow: inset 0 0 0 3px #0b0d10, 0 0 0 4px rgba(212, 100, 15, .35); }
.roof-shape polygon { fill: var(--concrete); stroke: #566070; }
.piece-roof:hover .roof-shape polygon { stroke: var(--safety); }
.piece-roof[data-state="selected"] .roof-shape polygon { fill: var(--safety); stroke: #0b0d10; }
.block.piece-wall { background-image: repeating-linear-gradient(90deg, transparent 0 17px, rgba(255, 255, 255, .04) 17px 18px); }
.piece-door::after { background: #d3d8df; }
.piece-door[data-state="selected"]::after { background: #0b0d10; }
.block.piece-plan { background-image: linear-gradient(rgba(255, 255, 255, .05) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .05) 1px, transparent 1px); }
.block.piece-plan[data-state="selected"] { background-color: var(--safety); border-color: #0b0d10; }
.toggle { border-color: #4a5360; border-radius: 999px; overflow: hidden; }
.toggle button { color: var(--ink); }
.toggle button + button { border-left-color: #4a5360; }
.toggle button[aria-pressed="true"] { background: var(--safety); color: #0b0d10; }
.piece-panel { border-radius: 18px; }
.panel-line { border-top-color: var(--line); }

/* ---- Steps ---- */
.steps li { border-top: 1px solid #3b444f; padding-top: 20px; }
.step-n { font-size: 48px; line-height: 48px; color: var(--safety-ink); }

/* ---- About / FAQ / contact ---- */
.about { background: var(--navy); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.about-copy blockquote p:not(.label) { font-size: 22px; line-height: 30px; }
.faq-list, .faq-list details { border-color: var(--line); }
.contact { background: var(--paper); }
.demo-form { border-radius: 20px; }
.phone-bar { background: rgba(7, 9, 11, .92); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border-top-color: var(--line); }
.video-modal::backdrop { background: rgba(0, 0, 0, .88); }

/* ---- Wider screens ---- */
@media (min-width: 720px) {
  .sec { padding-top: 96px; padding-bottom: 96px; }
  h2 { font-size: 44px; line-height: 48px; }
  .hero h1 { font-size: 58px; line-height: 60px; }
  .nav-links a { color: var(--ink); }
  .nav-links a:hover { color: var(--safety-ink); }
}
@media (min-width: 960px) {
  .hero h1 { font-size: 68px; line-height: 70px; }
  .hero-row { padding-top: 96px; padding-bottom: 104px; }
  .lead { font-size: 20px; line-height: 31px; }
}
@media (min-width: 720px) and (max-width: 1099px) {
  html[lang="es"] .hero h1 { font-size: 46px; line-height: 48px; }
}
@media (min-width: 1100px) {
  html[lang="es"] .hero h1 { font-size: 50px; line-height: 52px; }
}
@media (min-width: 1200px) {
  html[lang="es"] .hero h1 { font-size: 54px; line-height: 56px; }
}

/* ---- Motion (only when uplift.js says the visitor allows it) ---- */
/* Headings rise into place (translate, so it never fights the hover lift); cards and steps are wiped in from the bottom (clip-path), so
   nothing fades (text contrast never changes mid-reveal) and no card's position shifts. */
html.motion .rv { translate: 0 28px; transition: translate .9s var(--ease); transition-delay: calc(var(--i, 0) * 80ms); }
html.motion .rv.is-in { translate: 0 0; }
html.motion .rvf { clip-path: inset(18% 0 0 0 round 16px); transition: clip-path .9s var(--ease); transition-delay: calc(var(--i, 0) * 80ms); }
html.motion .rvf.is-in { clip-path: inset(0 round 16px); }
html.motion .hero-copy > * { animation: rise 1s var(--ease) both; }
html.motion .hero-copy > :nth-child(2) { animation-delay: .08s; }
html.motion .hero-copy > :nth-child(3) { animation-delay: .16s; }
html.motion .hero-copy > :nth-child(4) { animation-delay: .24s; }
html.motion .hero-copy > :nth-child(5) { animation-delay: .32s; }
html.motion .phone-mock { animation: phone-in 1.1s var(--ease) .1s both; }
@keyframes rise { from { opacity: 0; transform: translateY(24px); } }
@keyframes phone-in { from { opacity: 0; translate: 0 60px; } }
/* The house builds itself the first time it scrolls into view: slab, then walls, then door and windows, then roof. */
html.motion .house-art:not(.is-built) .block { clip-path: inset(100% 0 0 0); }
html.motion .house-art .block { transition-property: clip-path, transform, box-shadow; }
html.motion .house-art.is-built .block { clip-path: inset(-24px); transition-duration: .5s, .35s, .35s; transition-delay: calc(var(--b, 0) * 70ms), 0s, 0s; }
html.motion .house-art.is-built .block.settled { clip-path: none; transition-delay: 0s; }
html.motion .piece-panel.flash { animation: panel-in .5s var(--ease); }
@keyframes panel-in { from { box-shadow: 0 0 0 3px rgba(212, 100, 15, .7); } }
html.motion [data-magnetic] { transition: transform .4s var(--ease), background .2s; }

@media (prefers-reduced-motion: reduce) {
  .work-card:hover, .sys-card:hover, .block:hover { transform: none; }
}

/* Windows high contrast: keep the system highlight on selected pieces (these rules beat the dark-theme colors above). */
@media (forced-colors: active) {
  .block[aria-pressed="true"], .house-art .block[aria-pressed="true"], .toggle button[aria-pressed="true"] { forced-color-adjust: none; background: Highlight; color: HighlightText; border-color: Highlight; }
  .block.piece-roof[aria-pressed="true"] { background: transparent; color: HighlightText; }
  .roof-shape polygon { fill: Canvas; stroke: CanvasText; }
  .piece-roof[aria-pressed="true"] .roof-shape polygon { fill: Highlight; stroke: Highlight; }
  .block, .toggle button { transition: none; }
}