/* ==========================================================
   MACHETRIX — SETĂRI RAPIDE
   Modifică valorile de mai jos pentru a schimba întregul site.
   ========================================================== */
:root {
      --ink: #111111;
      --paper: #f7f6f2;
      --white: #ffffff;
      --muted: #686863;
      --line: #d9d8d2;
      --soft: #ecebe6;
      --red: #e33125;
      --red-dark: #bb2219;
      --shadow: 0 22px 70px rgba(17,17,17,.12);
      --radius: 2px;
      --container: min(1240px, calc(100vw - 80px));
      --font-main: "Avenir Next", "Segoe UI", Helvetica, Arial, sans-serif;
      --font-display: "Avenir Next", "Segoe UI", Helvetica, Arial, sans-serif;
      --hero-title-size: clamp(3.35rem, 5.8vw, 6rem);
      --section-title-size: clamp(2.5rem, 4.6vw, 4.8rem);
    }

    * { box-sizing: border-box; }
    html { scroll-behavior: smooth; scroll-padding-top: 92px; }
    body {
      margin: 0;
      background: var(--paper);
      color: var(--ink);
      font-family: var(--font-main);
      font-size: 16px;
      line-height: 1.6;
      -webkit-font-smoothing: antialiased;
      overflow-x: hidden;
    }
    body.menu-open { overflow: hidden; }
    ::selection { background: var(--red); color: #fff; }
    img { max-width: 100%; display: block; }
    a { color: inherit; text-decoration: none; }
    button, input, select, textarea { font: inherit; }
    button { color: inherit; }
    :focus-visible { outline: 3px solid rgba(227,49,37,.35); outline-offset: 4px; }

    .skip-link {
      position: fixed; left: 16px; top: -100px; z-index: 2000;
      background: var(--ink); color: #fff; padding: 12px 18px;
    }
    .skip-link:focus { top: 16px; }
    .container { width: var(--container); margin-inline: auto; }
    .eyebrow {
      display: inline-flex; align-items: center; gap: 10px;
      color: var(--muted); font-size: .72rem; font-weight: 800;
      letter-spacing: .16em; text-transform: uppercase;
    }
    .eyebrow::before { content: ""; width: 28px; height: 2px; background: var(--red); }
    .section { padding: 128px 0; position: relative; }
    .section-head {
      display: grid; grid-template-columns: .72fr 1.3fr; gap: 80px;
      align-items: end; margin-bottom: 64px;
    }
    .section-title, .display {
      font-family: var(--font-display);
      font-weight: 700; text-transform: none; letter-spacing: -.048em;
      line-height: 1; margin: 0;
    }
    .section-title { font-size: var(--section-title-size); }
    .section-lead { max-width: 610px; margin: 0; color: var(--muted); font-size: clamp(1rem, 1.4vw, 1.22rem); }
    .muted { color: var(--muted); }
    .red { color: var(--red); }
    .no-break { white-space: nowrap; }

    .btn {
      appearance: none; border: 1px solid var(--ink); background: transparent;
      display: inline-flex; align-items: center; justify-content: center; gap: 18px;
      min-height: 54px; padding: 0 23px; cursor: pointer;
      font-size: .76rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
      transition: color .25s, background .25s, border-color .25s, transform .25s;
    }
    .btn::after { content: "↗"; font-size: 1.05rem; transition: transform .25s; }
    .btn:hover { background: var(--ink); color: #fff; transform: translateY(-2px); }
    .btn:hover::after { transform: translate(3px,-3px); }
    .btn-primary { background: var(--red); border-color: var(--red); color: #fff; }
    .btn-primary:hover { background: var(--red-dark); border-color: var(--red-dark); }
    .btn-light { border-color: rgba(255,255,255,.42); color: #fff; }
    .btn-light:hover { background: #fff; color: var(--ink); border-color: #fff; }

    .topbar {
      background: var(--ink); color: #fff; min-height: 35px;
      display: flex; align-items: center; font-size: .68rem;
      letter-spacing: .11em; text-transform: uppercase;
    }
    .topbar .container { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
    .topbar strong { color: #fff; }
    .topbar span:last-child { color: #aaa; }

    .site-header {
      position: sticky; top: 0; z-index: 1000; background: rgba(247,246,242,.92);
      border-bottom: 1px solid rgba(17,17,17,.12); backdrop-filter: blur(16px);
    }
    .nav { height: 72px; display: flex; align-items: center; justify-content: space-between; }
    .logo { display: inline-flex; align-items: center; flex: 0 0 auto; }
    .logo-image { width: 208px; height: 40px; object-fit: contain; object-position: left center; }
    .nav-links { display: flex; align-items: center; gap: 31px; list-style: none; margin: 0; padding: 0; }
    .nav-links a:not(.btn) {
      position: relative; font-size: .71rem; letter-spacing: .1em; font-weight: 800; text-transform: uppercase;
    }
    .nav-links a:not(.btn)::after {
      content: ""; position: absolute; left: 0; right: 100%; bottom: -8px; height: 2px;
      background: var(--red); transition: right .25s;
    }
    .nav-links a:hover::after, .nav-links a.active::after { right: 0; }
    .nav-links .btn { min-height: 42px; padding-inline: 18px; }
    .menu-toggle { display: none; width: 44px; height: 44px; border: 0; background: transparent; cursor: pointer; }
    .menu-toggle span, .menu-toggle::before, .menu-toggle::after {
      content: ""; display: block; width: 25px; height: 2px; background: var(--ink); margin: 6px auto; transition: .25s;
    }
    .menu-toggle[aria-expanded="true"] span { opacity: 0; }
    .menu-toggle[aria-expanded="true"]::before { transform: translateY(8px) rotate(45deg); }
    .menu-toggle[aria-expanded="true"]::after { transform: translateY(-8px) rotate(-45deg); }

    .hero { min-height: calc(100vh - 107px); display: flex; align-items: stretch; border-bottom: 1px solid var(--line); }
    .hero .container { display: grid; grid-template-columns: .93fr 1.07fr; }
    .hero-copy { padding: 84px 72px 72px 0; display: flex; flex-direction: column; justify-content: center; }
    /* TITLUL PRINCIPAL: dimensiunea se modifică din --hero-title-size, sus. */
    .hero h1 { font-size: var(--hero-title-size); margin: 25px 0 30px; max-width: 720px; }
    .hero h1 > span { display: block; }
    .hero h1 .red { display: inline; }
    .hero-lead { max-width: 580px; color: #4e4e4a; font-size: clamp(1.05rem, 1.5vw, 1.25rem); margin: 0 0 36px; }
    .hero-actions { display: flex; flex-wrap: wrap; gap: 12px; }
    .hero-proof {
      margin-top: 52px; padding-top: 25px; border-top: 1px solid var(--line);
      display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px;
    }
    .proof-item strong { display: block; font-size: .82rem; text-transform: uppercase; letter-spacing: .05em; margin-bottom: 5px; }
    .proof-item span { color: var(--muted); font-size: .76rem; line-height: 1.35; display: block; }
    .hero-media { min-height: 650px; position: relative; overflow: hidden; background: #d9d5cf; }
    .hero-media::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, transparent 50%, rgba(8,8,8,.52)); }
    .hero-media img { width: 100%; height: 100%; object-fit: cover; object-position: 63% center; transition: transform 1.2s cubic-bezier(.2,.7,.2,1); }
    .hero-media:hover img { transform: scale(1.025); }
    .media-badge {
      position: absolute; z-index: 2; top: 24px; right: 24px; background: rgba(247,246,242,.92);
      padding: 10px 13px; font-size: .64rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
    }
    .media-caption { position: absolute; z-index: 2; left: 28px; bottom: 27px; right: 28px; color: #fff; display: flex; justify-content: space-between; align-items: end; gap: 25px; }
    .media-caption strong { font-size: clamp(1.2rem, 2vw, 1.75rem); text-transform: uppercase; line-height: 1.05; letter-spacing: -.02em; max-width: 360px; }
    .media-caption span { font-size: .66rem; letter-spacing: .1em; text-transform: uppercase; color: #ddd; text-align: right; }

    .marquee { overflow: hidden; background: var(--red); color: #fff; border-bottom: 1px solid var(--ink); }
    .marquee-track { width: max-content; display: flex; gap: 24px; padding: 15px 0; animation: marquee 28s linear infinite; }
    .marquee span { font-weight: 800; font-size: .71rem; letter-spacing: .14em; text-transform: uppercase; }
    .marquee i { font-style: normal; color: rgba(255,255,255,.6); }
    @keyframes marquee { to { transform: translateX(-50%); } }

    .service-grid { display: grid; grid-template-columns: repeat(3,1fr); border: 1px solid var(--line); }
    .service-card { min-height: 510px; padding: 40px; position: relative; background: rgba(255,255,255,.4); transition: background .3s, transform .3s; }
    .service-card + .service-card { border-left: 1px solid var(--line); }
    .service-card:hover { background: var(--white); transform: translateY(-8px); z-index: 2; box-shadow: var(--shadow); }
    .service-num { font-size: .7rem; letter-spacing: .14em; color: var(--red); font-weight: 900; }
    .service-card h3 { margin: 96px 0 16px; font-size: clamp(1.6rem, 2.2vw, 2.5rem); text-transform: uppercase; letter-spacing: -.045em; line-height: 1; }
    .service-card p { color: var(--muted); min-height: 78px; }
    .feature-list { list-style: none; padding: 0; margin: 28px 0 36px; border-top: 1px solid var(--line); }
    .feature-list li { padding: 10px 0; border-bottom: 1px solid var(--line); font-size: .84rem; display: flex; gap: 10px; }
    .feature-list li::before { content: "+"; color: var(--red); font-weight: 900; }
    .text-link { display: inline-flex; align-items: center; gap: 12px; font-size: .7rem; font-weight: 900; letter-spacing: .11em; text-transform: uppercase; }
    .text-link::after { content: "→"; font-size: 1rem; transition: transform .25s; }
    .text-link:hover::after { transform: translateX(5px); }

    .portfolio { background: var(--ink); color: #fff; }
    .portfolio .section-lead, .portfolio .eyebrow { color: #9b9b96; }
    .portfolio-grid { display: grid; grid-template-columns: 1.55fr .9fr; grid-template-rows: repeat(2, 360px); gap: 12px; }
    .project-card { position: relative; overflow: hidden; background: #2a2a28; }
    .project-card:first-child { grid-row: 1 / 3; }
    .project-card::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 44%, rgba(0,0,0,.78)); }
    .project-card img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1); transition: transform .6s, filter .5s; }
    .project-card:hover img { transform: scale(1.035); filter: grayscale(.4); }
    .project-label { position: absolute; z-index: 2; left: 27px; right: 27px; bottom: 25px; display: flex; align-items: end; justify-content: space-between; gap: 20px; }
    .project-label h3 { font-size: clamp(1.25rem, 2.2vw, 2.1rem); line-height: 1; text-transform: uppercase; margin: 4px 0 0; letter-spacing: -.03em; }
    .project-meta { color: #bbb; font-size: .64rem; letter-spacing: .1em; text-transform: uppercase; }
    .demo-chip { position: absolute; z-index: 2; top: 18px; left: 18px; background: rgba(17,17,17,.78); color: #fff; border: 1px solid rgba(255,255,255,.22); padding: 8px 10px; font-size: .58rem; letter-spacing: .12em; font-weight: 800; text-transform: uppercase; }
    .project-arrow { width: 42px; height: 42px; border: 1px solid rgba(255,255,255,.38); display: grid; place-items: center; flex: 0 0 auto; }
    .portfolio-note { margin: 26px 0 0; color: #888; font-size: .73rem; max-width: 680px; }

    .difference-grid { display: grid; grid-template-columns: .95fr 1.05fr; gap: 90px; align-items: start; }
    .difference-copy { position: sticky; top: 120px; }
    .difference-copy .section-title { margin-top: 24px; }
    .difference-copy p { max-width: 500px; margin: 28px 0 0; }
    .difference-list { border-top: 1px solid var(--line); }
    .difference-item { display: grid; grid-template-columns: 56px 1fr; gap: 22px; padding: 31px 0; border-bottom: 1px solid var(--line); }
    .difference-item .num { color: var(--red); font-size: .7rem; font-weight: 900; letter-spacing: .1em; }
    .difference-item h3 { margin: 0 0 7px; font-size: 1.18rem; text-transform: uppercase; letter-spacing: -.02em; }
    .difference-item p { margin: 0; color: var(--muted); font-size: .91rem; }

    .developer { background: #deddd8; overflow: hidden; }
    .developer::after { content: ""; position: absolute; right: -50px; bottom: -100px; width: min(30vw, 430px); aspect-ratio: 1; background: url("machetrix-assets/mark-mono-black.svg") center / contain no-repeat; opacity: .055; pointer-events: none; }
    .developer-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: 90px; position: relative; z-index: 1; }
    .developer h2 { margin: 24px 0 28px; }
    .developer-copy > p { max-width: 590px; color: #555550; font-size: 1.12rem; }
    .developer-copy .btn { margin-top: 25px; }
    .developer-metrics { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid rgba(17,17,17,.2); border-left: 1px solid rgba(17,17,17,.2); align-self: end; }
    .metric { min-height: 170px; padding: 25px; border-right: 1px solid rgba(17,17,17,.2); border-bottom: 1px solid rgba(17,17,17,.2); background: rgba(255,255,255,.18); }
    .metric strong { display: block; font-size: 2.4rem; letter-spacing: -.06em; margin-bottom: 6px; }
    .metric span { font-size: .78rem; color: #555550; line-height: 1.35; display: block; }

    .process-wrap { position: relative; }
    .process-line { position: absolute; top: 34px; left: 7%; right: 7%; height: 1px; background: var(--line); }
    .process-grid { display: grid; grid-template-columns: repeat(5,1fr); gap: 20px; position: relative; }
    .process-step { padding-right: 15px; }
    .step-dot { width: 69px; height: 69px; background: var(--paper); border: 1px solid var(--ink); display: grid; place-items: center; font-size: .72rem; font-weight: 900; position: relative; z-index: 1; transition: background .25s, color .25s, transform .25s; }
    .process-step:hover .step-dot { background: var(--red); border-color: var(--red); color: #fff; transform: rotate(-4deg); }
    .process-step h3 { text-transform: uppercase; font-size: 1rem; margin: 25px 0 9px; }
    .process-step p { color: var(--muted); font-size: .81rem; line-height: 1.55; margin: 0; }
    .approval-note { margin-top: 58px; padding: 30px; border: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; gap: 30px; background: #fff; }
    .approval-note strong { text-transform: uppercase; letter-spacing: -.02em; }
    .approval-note p { margin: 4px 0 0; color: var(--muted); font-size: .87rem; }
    .approval-icon { width: 53px; height: 53px; flex: 0 0 auto; border: 1px solid var(--red); color: var(--red); display: grid; place-items: center; font-weight: 900; }

    .capabilities { background: var(--white); }
    .cap-grid { display: grid; grid-template-columns: .86fr 1.14fr; gap: 95px; align-items: start; }
    .format-board { background: var(--ink); color: #fff; padding: 42px; box-shadow: var(--shadow); }
    .format-board h3 { margin: 0 0 9px; text-transform: uppercase; font-size: 1rem; }
    .format-board p { color: #9b9b97; margin: 0 0 30px; font-size: .84rem; }
    .format-chips { display: flex; flex-wrap: wrap; gap: 9px; }
    .format-chip { border: 1px solid #484846; padding: 12px 14px; font-size: .69rem; font-weight: 800; letter-spacing: .09em; transition: background .2s, border-color .2s; }
    .format-chip:hover { background: var(--red); border-color: var(--red); }
    .format-foot { margin-top: 34px; padding-top: 24px; border-top: 1px solid #3a3a38; color: #aaa; font-size: .72rem; }
    .cap-copy .section-title { font-size: clamp(2.7rem, 5vw, 5rem); margin: 24px 0 28px; }
    .cap-copy > p { color: var(--muted); max-width: 620px; }
    .check-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 30px; margin-top: 36px; }
    .check-item { padding: 18px 0; border-top: 1px solid var(--line); font-size: .84rem; font-weight: 700; display: flex; gap: 12px; }
    .check-item::before { content: "✓"; color: var(--red); }

    .finish-layout { display: grid; grid-template-columns: .74fr 1.26fr; min-height: 575px; border: 1px solid var(--line); background: #fff; }
    .finish-nav { border-right: 1px solid var(--line); }
    .finish-tab {
      width: 100%; min-height: 112px; padding: 25px 28px; border: 0; border-bottom: 1px solid var(--line); background: transparent;
      display: flex; align-items: center; justify-content: space-between; gap: 18px; text-align: left; cursor: pointer; transition: background .25s, color .25s;
    }
    .finish-tab span { display: block; }
    .finish-tab .tab-num { font-size: .63rem; letter-spacing: .12em; color: var(--muted); margin-bottom: 6px; }
    .finish-tab strong { text-transform: uppercase; font-size: .92rem; letter-spacing: .02em; }
    .finish-tab::after { content: "→"; opacity: .4; }
    .finish-tab.active { background: var(--ink); color: #fff; }
    .finish-tab.active .tab-num { color: #aaa; }
    .finish-tab.active::after { color: var(--red); opacity: 1; }
    .finish-panel { padding: 58px; display: none; position: relative; overflow: hidden; }
    .finish-panel.active { display: block; animation: panelIn .38s ease; }
    @keyframes panelIn { from { opacity: 0; transform: translateY(8px); } }
    .finish-panel h3 { text-transform: uppercase; font-size: clamp(2rem, 4vw, 4.2rem); line-height: .95; letter-spacing: -.05em; margin: 0 0 23px; max-width: 590px; }
    .finish-panel > p { color: var(--muted); max-width: 570px; }
    .finish-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 35px; }
    .finish-tag { border: 1px solid var(--line); padding: 10px 12px; font-size: .68rem; font-weight: 800; text-transform: uppercase; letter-spacing: .07em; }
    .finish-swatch { position: absolute; width: 190px; height: 190px; border-radius: 50%; right: -45px; bottom: -45px; background: #edece7; box-shadow: inset 0 0 0 30px #f8f7f3, inset 0 0 0 31px var(--line); }
    .finish-panel[data-tone="architectural"] .finish-swatch { background: #c6c0b5; }
    .finish-panel[data-tone="realist"] .finish-swatch { background: #596355; }
    .lighting-strip { margin-top: 12px; background: var(--ink); color: #fff; padding: 37px 40px; display: grid; grid-template-columns: 1fr 1.7fr auto; align-items: center; gap: 35px; }
    .lighting-strip strong { text-transform: uppercase; font-size: 1.2rem; }
    .lighting-strip p { margin: 0; color: #aaa; font-size: .84rem; }

    .testimonials { background: #e9e8e3; }
    .quote-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 12px; }
    .quote-card { background: rgba(255,255,255,.7); padding: 36px; min-height: 330px; display: flex; flex-direction: column; }
    .example-label { color: var(--red); font-size: .59rem; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; }
    .quote-card blockquote { margin: 45px 0 30px; font-size: 1.05rem; line-height: 1.55; letter-spacing: -.01em; }
    .quote-card footer { margin-top: auto; padding-top: 20px; border-top: 1px solid var(--line); color: var(--muted); font-size: .73rem; }
    .quote-card footer strong { display: block; color: var(--ink); text-transform: uppercase; font-size: .74rem; }
    .testimonial-disclaimer { margin: 18px 0 0; color: var(--muted); font-size: .72rem; }

    .faq-layout { display: grid; grid-template-columns: .65fr 1.35fr; gap: 100px; }
    .faq-intro { position: sticky; top: 120px; align-self: start; }
    .faq-intro h2 { margin: 24px 0 25px; }
    .faq-list { border-top: 1px solid var(--line); }
    .faq-item { border-bottom: 1px solid var(--line); }
    .faq-button { width: 100%; border: 0; background: transparent; text-align: left; padding: 26px 0; cursor: pointer; display: grid; grid-template-columns: 42px 1fr 30px; gap: 12px; align-items: center; }
    .faq-number { color: var(--red); font-size: .66rem; font-weight: 900; }
    .faq-question { font-weight: 800; text-transform: uppercase; letter-spacing: -.01em; }
    .faq-icon { width: 25px; height: 25px; position: relative; }
    .faq-icon::before, .faq-icon::after { content: ""; position: absolute; left: 5px; top: 12px; width: 16px; height: 1px; background: var(--ink); transition: transform .25s; }
    .faq-icon::after { transform: rotate(90deg); }
    .faq-button[aria-expanded="true"] .faq-icon::after { transform: rotate(0); }
    .faq-answer { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .35s ease; }
    .faq-answer > div { overflow: hidden; }
    .faq-answer p { margin: 0 52px 27px 54px; color: var(--muted); max-width: 670px; }
    .faq-button[aria-expanded="true"] + .faq-answer { grid-template-rows: 1fr; }

    .quote-section { background: var(--ink); color: #fff; }
    .quote-section .section-head { align-items: start; }
    .quote-section .section-lead, .quote-section .eyebrow { color: #999; }
    .quote-form-shell { display: grid; grid-template-columns: 290px 1fr; border: 1px solid #363634; background: #161616; }
    .form-sidebar { padding: 38px 30px; border-right: 1px solid #363634; }
    .form-sidebar h3 { text-transform: uppercase; margin: 0 0 8px; font-size: 1rem; }
    .form-sidebar > p { color: #888; font-size: .78rem; margin: 0 0 34px; }
    .form-progress { list-style: none; padding: 0; margin: 0; }
    .form-progress li { position: relative; display: flex; gap: 13px; padding: 0 0 33px; color: #686866; font-size: .69rem; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; }
    .form-progress li::before { content: attr(data-step); width: 28px; height: 28px; border: 1px solid #444; display: grid; place-items: center; flex: 0 0 auto; color: #888; }
    .form-progress li::after { content: ""; position: absolute; top: 29px; left: 14px; width: 1px; height: 33px; background: #333; }
    .form-progress li:last-child::after { display: none; }
    .form-progress li.active { color: #fff; }
    .form-progress li.active::before { background: var(--red); border-color: var(--red); color: #fff; }
    .form-progress li.done::before { content: "✓"; border-color: #777; color: #fff; }
    .privacy-box { border-top: 1px solid #333; margin-top: 30px; padding-top: 25px; color: #777; font-size: .69rem; }
    .privacy-box strong { color: #bbb; display: block; text-transform: uppercase; margin-bottom: 6px; }
    .form-main { padding: 48px 52px; min-height: 590px; }
    .form-step { display: none; animation: panelIn .35s ease; }
    .form-step.active { display: block; }
    .form-step h3 { font-size: clamp(1.7rem, 3vw, 2.7rem); text-transform: uppercase; letter-spacing: -.04em; line-height: 1; margin: 0 0 10px; }
    .form-step > p { color: #888; margin: 0 0 32px; }
    .choice-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
    .choice { position: relative; }
    .choice input { position: absolute; opacity: 0; pointer-events: none; }
    .choice label { min-height: 98px; border: 1px solid #393937; padding: 19px; cursor: pointer; display: flex; flex-direction: column; justify-content: center; transition: border-color .2s, background .2s; }
    .choice label strong { text-transform: uppercase; font-size: .78rem; }
    .choice label span { color: #777; font-size: .72rem; margin-top: 4px; }
    .choice input:checked + label { border-color: var(--red); background: rgba(227,49,37,.09); }
    .choice input:focus-visible + label { outline: 2px solid var(--red); outline-offset: 2px; }
    .field-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
    .field { margin-bottom: 20px; }
    .field.full { grid-column: 1/-1; }
    .field label { display: block; color: #aaa; font-size: .65rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; margin-bottom: 8px; }
    .field input, .field select, .field textarea {
      width: 100%; color: #fff; background: #1c1c1b; border: 1px solid #3b3b39; border-radius: 0; padding: 14px 15px; outline: none;
    }
    .field input:focus, .field select:focus, .field textarea:focus { border-color: var(--red); }
    .field textarea { min-height: 112px; resize: vertical; }
    .field select { appearance: none; background-image: linear-gradient(45deg,transparent 50%,#999 50%),linear-gradient(135deg,#999 50%,transparent 50%); background-position: calc(100% - 18px) 50%, calc(100% - 13px) 50%; background-size: 5px 5px; background-repeat: no-repeat; }
    .file-drop { border: 1px dashed #555; padding: 31px; text-align: center; cursor: pointer; background: #191918; transition: border-color .2s, background .2s; }
    .file-drop:hover, .file-drop.has-file { border-color: var(--red); background: rgba(227,49,37,.06); }
    .file-drop input { position: absolute; opacity: 0; width: 1px; height: 1px; }
    .file-drop strong { display: block; text-transform: uppercase; font-size: .8rem; }
    .file-drop span { display: block; color: #777; font-size: .72rem; margin-top: 4px; }
    .option-checks { display: flex; flex-wrap: wrap; gap: 8px; }
    .mini-check { position: relative; }
    .mini-check input { position: absolute; opacity: 0; }
    .mini-check label { display: block; border: 1px solid #3c3c3a; padding: 10px 12px; color: #aaa; font-size: .69rem; cursor: pointer; }
    .mini-check input:checked + label { border-color: var(--red); background: var(--red); color: #fff; }
    .form-error { min-height: 24px; margin-top: 12px; color: #ff766d; font-size: .73rem; }
    .form-actions { display: flex; align-items: center; justify-content: space-between; gap: 15px; margin-top: 26px; padding-top: 24px; border-top: 1px solid #30302f; }
    .form-actions .btn { min-width: 150px; }
    .btn-back { border: 0; color: #888; background: transparent; padding: 12px 0; font-size: .7rem; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; cursor: pointer; }
    .btn-back:hover { color: #fff; }
    .submit-note { color: #777; font-size: .67rem; max-width: 280px; line-height: 1.4; }
    .form-success { display: none; min-height: 490px; align-items: center; justify-content: center; text-align: center; flex-direction: column; }
    .form-success.show { display: flex; }
    .success-icon { width: 72px; height: 72px; background: var(--red); display: grid; place-items: center; font-size: 1.7rem; margin-bottom: 25px; }
    .form-success h3 { font-size: 2.4rem; text-transform: uppercase; letter-spacing: -.04em; margin: 0 0 12px; }
    .form-success p { color: #888; max-width: 510px; }

    .final-cta { background: var(--red); color: #fff; padding: 78px 0; }
    .final-cta .container { display: flex; align-items: center; justify-content: space-between; gap: 40px; }
    .final-cta h2 { font-size: clamp(2rem, 4.7vw, 5rem); margin: 0; text-transform: uppercase; letter-spacing: -.055em; line-height: .95; max-width: 820px; }
    .final-cta .btn { flex: 0 0 auto; }

    .site-footer { background: #090909; color: #fff; padding: 70px 0 25px; }
    .footer-grid { display: grid; grid-template-columns: 1.6fr repeat(3,1fr); gap: 60px; padding-bottom: 62px; }
    .footer-brand .logo { margin-bottom: 20px; }
    .footer-brand .logo-image { width: 234px; height: 45px; }
    .footer-brand p { color: #777; max-width: 330px; font-size: .82rem; }
    .footer-col h3 { color: #777; font-size: .64rem; letter-spacing: .12em; text-transform: uppercase; margin: 0 0 19px; }
    .footer-col a, .footer-col span { display: block; color: #bbb; font-size: .79rem; margin: 10px 0; }
    .footer-col a:hover { color: #fff; }
    .footer-bottom { border-top: 1px solid #292928; padding-top: 22px; display: flex; justify-content: space-between; gap: 25px; color: #60605e; font-size: .66rem; }

    .reveal { opacity: 0; transform: translateY(24px); transition: opacity .65s ease, transform .65s ease; }
    .reveal.in { opacity: 1; transform: none; }
    .reveal-delay-1 { transition-delay: .08s; }
    .reveal-delay-2 { transition-delay: .16s; }

    @media (prefers-reduced-motion: reduce) {
      *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; transition-duration: .01ms !important; }
      .reveal { opacity: 1; transform: none; }
    }

    @media (max-width: 1080px) {
      :root { --container: min(100% - 48px, 1240px); }
      .nav-links { gap: 18px; }
      .nav-links li:nth-child(4), .nav-links li:nth-child(5) { display: none; }
      .hero .container { grid-template-columns: 1fr 1fr; }
      .hero-copy { padding-right: 40px; }
      .hero h1 { font-size: clamp(3.2rem, 5.6vw, 5.15rem); }
      .section-head { grid-template-columns: .8fr 1.2fr; gap: 45px; }
      .service-card { padding: 30px; }
      .developer-grid, .cap-grid { gap: 55px; }
      .faq-layout { gap: 60px; }
      .quote-form-shell { grid-template-columns: 250px 1fr; }
      .form-main { padding: 42px 38px; }
    }

    @media (max-width: 820px) {
      :root { --container: min(100% - 36px, 720px); }
      .section { padding: 92px 0; }
      .topbar span:last-child { display: none; }
      .menu-toggle { display: block; }
      .nav-links {
        position: absolute; top: 72px; left: 0; right: 0; height: calc(100vh - 72px); overflow-y: auto; background: var(--paper); display: flex; flex-direction: column; align-items: stretch;
        gap: 0; padding: 30px 24px 45px; transform: translateX(100%); transition: transform .32s; visibility: hidden;
      }
      .nav-links.open { transform: translateX(0); visibility: visible; }
      .nav-links li, .nav-links li:nth-child(4), .nav-links li:nth-child(5) { display: block; border-bottom: 1px solid var(--line); }
      .nav-links a:not(.btn) { display: block; font-size: 1rem; padding: 20px 5px; }
      .nav-links .btn { margin-top: 24px; width: 100%; }
      .hero { min-height: 0; }
      .hero .container { width: 100%; grid-template-columns: 1fr; }
      .hero-copy { width: var(--container); margin: auto; padding: 72px 0 55px; }
      .hero h1 { font-size: clamp(3.15rem, 10vw, 4.9rem); }
      .hero-media { min-height: 620px; }
      .hero-proof { max-width: 680px; }
      .section-head { grid-template-columns: 1fr; gap: 24px; margin-bottom: 44px; }
      .service-grid { grid-template-columns: 1fr; }
      .service-card { min-height: 0; }
      .service-card + .service-card { border-left: 0; border-top: 1px solid var(--line); }
      .service-card h3 { margin-top: 45px; }
      .service-card p { min-height: 0; }
      .portfolio-grid { grid-template-columns: 1fr 1fr; grid-template-rows: 520px 330px; }
      .project-card:first-child { grid-column: 1/-1; grid-row: 1; }
      .difference-grid { grid-template-columns: 1fr; gap: 60px; }
      .difference-copy, .faq-intro { position: static; }
      .developer-grid, .cap-grid { grid-template-columns: 1fr; }
      .process-line { display: none; }
      .process-grid { grid-template-columns: 1fr 1fr; gap: 40px; }
      .finish-layout { grid-template-columns: 1fr; }
      .finish-nav { border-right: 0; display: grid; grid-template-columns: repeat(3,1fr); }
      .finish-tab { padding: 20px; min-height: 94px; border-right: 1px solid var(--line); }
      .finish-tab:last-child { border-right: 0; }
      .finish-tab::after { display: none; }
      .finish-panel { min-height: 410px; }
      .lighting-strip { grid-template-columns: 1fr auto; }
      .lighting-strip p { grid-column: 1/-1; grid-row: 2; }
      .quote-grid { grid-template-columns: 1fr; }
      .quote-card { min-height: 270px; }
      .faq-layout { grid-template-columns: 1fr; gap: 48px; }
      .quote-form-shell { grid-template-columns: 1fr; }
      .form-sidebar { border-right: 0; border-bottom: 1px solid #363634; }
      .form-sidebar > p, .privacy-box { display: none; }
      .form-progress { display: grid; grid-template-columns: repeat(4,1fr); }
      .form-progress li { padding: 0; flex-direction: column; gap: 8px; }
      .form-progress li::after { width: calc(100% - 28px); height: 1px; left: 28px; top: 14px; }
      .footer-grid { grid-template-columns: 1.4fr 1fr 1fr; }
      .footer-col:last-child { grid-column: 2; }
    }

    @media (max-width: 560px) {
      :root { --container: calc(100% - 28px); }
      .topbar { font-size: .58rem; }
      .topbar .container { justify-content: center; }
      .logo-image { width: 166px; height: 32px; }
      .section { padding: 75px 0; }
      .hero-copy { padding-top: 55px; }
      .hero h1 { font-size: clamp(2.75rem, 12.8vw, 3.9rem); margin-top: 20px; }
      .hero-actions { flex-direction: column; }
      .hero-actions .btn { width: 100%; }
      .hero-proof { grid-template-columns: 1fr; gap: 13px; }
      .proof-item { display: grid; grid-template-columns: 108px 1fr; gap: 10px; }
      .hero-media { min-height: 490px; }
      .media-caption { left: 18px; right: 18px; bottom: 18px; }
      .media-caption span { display: none; }
      .section-title { font-size: clamp(2.6rem, 14vw, 4.3rem); }
      .portfolio-grid { grid-template-columns: 1fr; grid-template-rows: 430px 300px 300px; }
      .project-card:first-child { grid-column: auto; }
      .developer-metrics { grid-template-columns: 1fr; }
      .metric { min-height: 120px; }
      .process-grid { grid-template-columns: 1fr; }
      .process-step { display: grid; grid-template-columns: 60px 1fr; gap: 18px; }
      .step-dot { width: 60px; height: 60px; }
      .process-step h3 { margin-top: 0; }
      .process-step p { grid-column: 2; margin-top: -35px; }
      .approval-note { align-items: start; }
      .check-grid { grid-template-columns: 1fr; }
      .finish-nav { grid-template-columns: 1fr; }
      .finish-tab { min-height: 75px; border-right: 0; }
      .finish-panel { padding: 35px 26px; }
      .finish-swatch { width: 130px; height: 130px; }
      .lighting-strip { grid-template-columns: 1fr; padding: 30px 25px; }
      .lighting-strip p { grid-column: auto; grid-row: auto; }
      .lighting-strip .btn { width: 100%; }
      .faq-answer p { margin-left: 0; margin-right: 25px; }
      .faq-button { grid-template-columns: 30px 1fr 25px; }
      .form-main { padding: 35px 22px; min-height: 620px; }
      .choice-grid, .field-grid { grid-template-columns: 1fr; }
      .field.full { grid-column: auto; }
      .form-sidebar { padding: 28px 22px; overflow: hidden; }
      .form-progress li { font-size: .54rem; letter-spacing: .04em; }
      .form-actions { align-items: end; }
      .submit-note { display: none; }
      .final-cta .container { flex-direction: column; align-items: flex-start; }
      .final-cta .btn { width: 100%; }
      .footer-grid { grid-template-columns: 1fr 1fr; gap: 38px 25px; }
      .footer-brand { grid-column: 1/-1; }
      .footer-col:last-child { grid-column: auto; }
      .footer-bottom { flex-direction: column; }
    }