.elementor-kit-132{--e-global-color-primary:#7B8E7C;--e-global-color-secondary:#FAFAF8;--e-global-color-text:#0E110F;--e-global-color-accent:#5F7260;--e-global-color-6f52753:#161616;--e-global-color-01ba21c:#2A2A2A;--e-global-color-bfa5ffe:#9A9A9A;--e-global-color-824c26e:#3A0A1E;--e-global-color-e4bf425:#FFFFFF;--e-global-color-8ec8740:#7AD19A;--e-global-color-ded0ef4:#F2F1EC;--e-global-color-7a43e0c:#2B302D;--e-global-color-a917ef8:#6F726D;--e-global-color-9582595:#B7B8B1;--e-global-color-8444f51:#E4E3DC;--e-global-color-ebe20be:#D2D1C9;--e-global-color-cad12d1:#C7D1C4;--e-global-typography-primary-font-family:"Geist";--e-global-typography-primary-font-weight:400;--e-global-typography-secondary-font-family:"Geist Mono";--e-global-typography-secondary-font-weight:400;--e-global-typography-secondary-text-transform:uppercase;--e-global-typography-text-font-family:"Geist";--e-global-typography-text-font-weight:400;--e-global-typography-text-text-transform:none;--e-global-typography-text-line-height:1.7em;--e-global-typography-accent-font-family:"Inter";--e-global-typography-accent-font-weight:400;color:#0E110F;font-family:"Geist", Sans-serif;font-size:16px;font-weight:400;line-height:1.7em;}.elementor-kit-132 button,.elementor-kit-132 input[type="button"],.elementor-kit-132 input[type="submit"],.elementor-kit-132 .elementor-button{background-color:var( --e-global-color-text );font-family:"Geist", Sans-serif;font-size:14px;font-weight:500;letter-spacing:-0.005em;color:var( --e-global-color-secondary );border-radius:999px 999px 999px 999px;padding:11px 18px 11px 16px;}.elementor-kit-132 button:hover,.elementor-kit-132 button:focus,.elementor-kit-132 input[type="button"]:hover,.elementor-kit-132 input[type="button"]:focus,.elementor-kit-132 input[type="submit"]:hover,.elementor-kit-132 input[type="submit"]:focus,.elementor-kit-132 .elementor-button:hover,.elementor-kit-132 .elementor-button:focus{background-color:var( --e-global-color-accent );color:var( --e-global-color-secondary );}.elementor-kit-132 e-page-transition{background-color:#FFBC7D;}.elementor-kit-132 a{color:#7B8E7C;}.elementor-kit-132 a:hover{color:#5F7260;}.elementor-kit-132 h1{color:#0E110F;font-family:"Geist", Sans-serif;font-size:56px;font-weight:700;}.elementor-kit-132 h2{color:#0E110F;font-family:"Geist", Sans-serif;font-size:42px;font-weight:700;}.elementor-kit-132 h3{color:#0E110F;font-family:"Geist", Sans-serif;font-size:32px;font-weight:600;}.elementor-kit-132 h4{color:#0E110F;font-family:"Geist", Sans-serif;font-size:24px;font-weight:600;}.elementor-kit-132 h5{color:#0E110F;font-family:"Geist", Sans-serif;font-size:20px;font-weight:500;}.elementor-kit-132 h6{color:#0E110F;font-family:"Geist", Sans-serif;font-size:16px;font-weight:500;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1140px;}.e-con{--container-max-width:1140px;}.elementor-widget:not(:last-child){--kit-widget-spacing:20px;}.elementor-element{--widgets-spacing:20px 20px;--widgets-spacing-row:20px;--widgets-spacing-column:20px;}{}h1.entry-title{display:var(--page-title-display);}@media(max-width:1024px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}
/* Start custom CSS *//* ============================================================
   *  M Design Works — Site Custom CSS
   *  Order: kit reset / accordion bridges / button bridges /
   *  Fluent Forms bridges
   * ============================================================ */

  /* === Button widget (Elementor button) bridges === */
  .btn-ghost {
      border:none !important;
  }
  .btn-ghost .elementor-button {
      background: transparent !important;
      background-image: none !important;
      color: #0e110f !important;
      border: 1px solid #d2d1c9 !important;
      border-radius: 999px;
  }
  .btn-ghost .elementor-button:hover {
      background: #F2F1EC !important;
      color: #0e110f !important;
     *border-color: #d2d1c9 !important;
  }

  /* === Section title typography === */
  .sec-title {
    font-family: Geist, sans-serif;
    font-size: clamp(64px, 9vw, 70px);
    line-height: 0.92;
    letter-spacing: -0.055em;
    font-weight: 500;
    margin: 0;
    max-width: 13ch;
    color: #0E110F;
  }
  .sec-title em {
    font-style: italic;
    color: #5F7260;
    font-weight: 500;
  }

  /* === Service arrow pseudo-element === */
  .svc-arrow::before {
    content: "\2197";
    display: inline-block;
    font-size: 18px;
    line-height: 1;
    color: #6F726D;
    transition: color .2s ease, transform .2s ease;
  }
  .svc:hover .svc-arrow::before {
    color: #5F7260;
    transform: translate(4px, -4px);
  }

  /* === Recent Work nested-accordion === */
  .mdw-work-accordion .e-n-accordion { border-top: 1px solid #E4E3DC; }
  .mdw-work-accordion details.e-n-accordion-item {
    border: 0 !important;
    border-bottom: 1px solid #E4E3DC !important;
    background: transparent !important;
  }
  .mdw-work-accordion .e-n-accordion-item-title {
    display: grid !important;
    grid-template-columns: 1fr auto !important;
    align-items: center !important;
    gap: 24px !important;
    padding: 28px 0 !important;
    background: transparent !important;
    border: 0 !important;
    text-align: left !important;
    transition: background-color 0.25s ease;
  }
  .mdw-work-accordion .e-n-accordion-item-title-text {
    display: grid !important;
    grid-template-columns: 60px 2fr 1fr 90px !important;
    align-items: center !important;
    gap: 24px !important;
    width: 100% !important;
    text-align: left !important;
    transform: translateX(0);
    transition: transform 0.45s cubic-bezier(.16, 1, .3, 1);
    will-change: transform;
  }
  .mdw-work-accordion .work-num {
    font-family: "Geist Mono", ui-monospace, monospace !important;
    font-size: 12px !important; color: #6F726D !important; font-weight: 400 !important;
  }
  .mdw-work-accordion .work-name {
    font-family: Geist, sans-serif !important;
    font-size: clamp(18px, 1.8vw, 24px) !important;
    font-weight: 500 !important; letter-spacing: -0.02em !important;
    color: #0E110F !important;
    transition: color 0.25s ease;
  }
  .mdw-work-accordion .work-cat,
  .mdw-work-accordion .work-year {
    font-family: "Geist Mono", ui-monospace, monospace !important;
    font-size: 12px !important; color: #6F726D !important;
    font-weight: 400 !important; letter-spacing: 0.01em !important;
  }
  .mdw-work-accordion .e-n-accordion-item-title-icon {
    justify-self: end !important; order: 2 !important;
    color: #6F726D !important; margin-right: 0 !important;
  }
  .mdw-work-accordion .e-n-accordion-item-title-icon svg {
    width: 14px !important; height: 14px !important; fill: currentColor !important;
  }
  .mdw-work-accordion .e-n-accordion-item-title:hover { background: #F2F1EC !important; }
  .mdw-work-accordion .e-n-accordion-item-title:hover .e-n-accordion-item-title-text { transform: translateX(14px); }
  .mdw-work-accordion details[open] > summary { background: #F2F1EC !important; }
  .mdw-work-accordion details[open] > summary .e-n-accordion-item-title-text { transform: translateX(14px); }
  .mdw-work-accordion details[open] .work-name { color: #5F7260 !important; }
  .mdw-work-accordion details.e-n-accordion-item > div {
    padding: 36px 0 48px !important;
    border-top: 1px solid #E4E3DC !important;
  }
  @media (max-width: 900px) {
    .mdw-work-accordion .e-n-accordion-item-title-text {
      grid-template-columns: 36px 1fr !important; gap: 14px !important;
    }
    .mdw-work-accordion .work-cat,
    .mdw-work-accordion .work-year { grid-column: 2; }
    .mdw-work-accordion .e-n-accordion-item-title:hover .e-n-accordion-item-title-text,
    .mdw-work-accordion details[open] > summary .e-n-accordion-item-title-text {
      transform: translateX(8px);
    }
  }

  /* === FAQ nested-accordion === */
  .mdw-faq .e-n-accordion { border-top: 1px solid #E4E3DC; }
  .mdw-faq details.e-n-accordion-item {
    border: 0 !important;
    border-bottom: 1px solid #E4E3DC !important;
    background: transparent !important;
  }
  .mdw-faq .e-n-accordion-item-title {
    display: grid !important;
    grid-template-columns: 1fr auto !important;
    align-items: center !important; gap: 24px !important;
    padding: 22px 0 !important;
    background: transparent !important; border: 0 !important;
    text-align: left !important;
    transition: padding 0.3s cubic-bezier(.22,1,.36,1), background 0.2s ease;
  }
  .mdw-faq .e-n-accordion-item-title-text {
    display: grid !important;
    grid-template-columns: 56px 1fr !important;
    align-items: center !important; gap: 24px !important;
    width: 100% !important; text-align: left !important;
  }
  .mdw-faq .faq-num {
    font-family: "Geist Mono", ui-monospace, monospace !important;
    font-size: 12px !important; color: #6F726D !important; font-weight: 400 !important;
  }
  .mdw-faq .faq-question {
    font-family: Geist, sans-serif !important;
    font-size: clamp(18px, 1.6vw, 22px) !important;
    line-height: 1.2 !important; font-weight: 500 !important;
    letter-spacing: -0.02em !important;
    color: #0E110F !important;
    transition: color 0.25s ease;
  }
  .mdw-faq details[open] .faq-question { color: #5F7260 !important; }
  .mdw-faq .e-n-accordion-item-title-icon {
    justify-self: end !important; order: 2 !important; color: #6F726D !important;
  }
  .mdw-faq .e-n-accordion-item-title-icon svg {
    width: 14px !important; height: 14px !important; fill: currentColor !important;
  }
  .mdw-faq .e-n-accordion-item-title:hover {
    background: #F2F1EC !important;
    padding-left: 14px !important; padding-right: 14px !important;
  }
  .mdw-faq details[open] > summary {
    background: transparent !important;
    padding-left: 0 !important; padding-right: 0 !important;
  }
  .mdw-faq details.e-n-accordion-item > div {
    padding: 0 0 32px 80px !important;
    border: 0 !important; background: transparent !important; box-shadow: none !important;
  }
  .mdw-faq details.e-n-accordion-item > div,
  .mdw-faq details.e-n-accordion-item > div.e-con,
  .mdw-faq details.e-n-accordion-item > div .e-con {
    border: 0 !important; background: transparent !important;
  }
  .mdw-faq details.e-n-accordion-item > div p {
    max-width: 62ch !important; margin: 0 !important;
    font-family: Geist, sans-serif !important;
    font-size: 16px !important; line-height: 1.55 !important;
    color: #0E110F !important;
  }
  .mdw-faq details[open] .e-n-accordion-item-title-icon svg { display: none !important; }
  .mdw-faq details[open] .e-n-accordion-item-title-icon::before {
    content: "×";
    font-family: Geist, sans-serif;
    font-size: 22px; line-height: 1; color: #5F7260;
  }
  @media (max-width: 900px) {
    .mdw-faq .e-n-accordion-item-title-text {
      grid-template-columns: 36px 1fr !important; gap: 14px !important;
    }
    .mdw-faq details.e-n-accordion-item > div { padding-left: 50px !important; }
  }

/* ============================================================
 * Fluent Forms <-> mockup class bridge — Vibe Check form
 * Generated by tools/build_vibe_form.py.  Master guide §28.26.
 *
 * !important is used liberally because Fluent Forms ships its own
 * stylesheet at the same specificity level (and sometimes higher
 * via the form-id-scoped .elementor-kit-132s). Without !important, FF wins
 * on source order and our brand styles are silently dropped.
 * ============================================================ */

/* --- M Design Works tokens (inlined so this CSS is self-contained;
       safe to remove if your kit's :root already publishes them) --- */
:root {
    --mdw-paper:     #FAFAF8;
    --mdw-paper-2:   #F2F1EC;
    --mdw-ink:       #0E110F;
    --mdw-ink-2:     #2B302D;
    --mdw-gray:      #6F726D;
    --mdw-gray-2:    #B7B8B1;
    --mdw-line:      #E4E3DC;
    --mdw-line-2:    #D2D1C9;
    --mdw-sage:      #7B8E7C;
    --mdw-sage-deep: #5F7260;
    --mdw-sage-soft: #C7D1C4;
    --mdw-font:      "Geist", "Inter", system-ui, sans-serif;
    --mdw-mono:      "Mono", "Geist Mono", ui-monospace, monospace;
}

/* --- Form scope reset: kill FF's default brand-blue styles --- */
.fluentform, .ff-default {
    background: transparent !important;
    color: var(--mdw-ink) !important;
}
.fluentform * { box-sizing: border-box; }

/* --- Field labels --- */
.fluentform .ff-el-input--label,
.fluentform .ff-el-input--label label {
    font-family: var(--mdw-mono) !important;
    font-size: 11px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.08em !important;
    color: var(--mdw-gray) !important;
    margin-bottom: 8px !important;
    padding: 0 !important;
    font-weight: 400 !important;
}
.fluentform .ff-el-input--label label .ff-el-is-required {
    color: var(--mdw-sage) !important;
}

/* --- Inputs + textareas --- */
.fluentform input[type="text"],
.fluentform input[type="email"],
.fluentform input[type="url"],
.fluentform input[type="tel"],
.fluentform input[type="number"],
.fluentform textarea,
.fluentform select,
.fluentform .ff-el-form-control {
    background: var(--mdw-paper-2) !important;
    border: 1px solid var(--mdw-line) !important;
    border-radius: 8px !important;
    padding: 12px 14px !important;
    font-family: var(--mdw-font) !important;
    font-size: 15px !important;
    color: var(--mdw-ink) !important;
    width: 100% !important;
    box-shadow: none !important;
    transition: border-color .15s ease, background .15s ease !important;
}
.fluentform input:focus,
.fluentform textarea:focus,
.fluentform select:focus,
.fluentform .ff-el-form-control:focus {
    border-color: var(--mdw-sage) !important;
    outline: none !important;
    background: var(--mdw-paper) !important;
    box-shadow: none !important;
}
.fluentform textarea { line-height: 1.55 !important; min-height: 96px !important; }

/* --- Radio + checkbox — render as pill chips matching mockup ---
 *
 * Real DOM (FF v5 ff_list_buttons mode):
 *   <div class="ff-el-form-check ff-el-form-check-INPUT [ff_item_selected]">
 *     <label class="ff-el-form-check-label" for="...">
 *       <input type="checkbox" ...>
 *       <span>Visible label text</span>     <-- FF puts chip styling HERE
 *     </label>
 *   </div>
 *
 * The visible chip is the SPAN inside the label, NOT the label itself.
 * The selected state is signalled by .ff_item_selected on the wrapper div.
 */

/* Wrapper + native input reset */
.fluentform .ff-el-form-check {
    display: inline-block !important;
    margin: 0 6px 8px 0 !important;
    padding: 0 !important;
    background: transparent !important;
}
.fluentform .ff-el-form-check input[type="radio"],
.fluentform .ff-el-form-check input[type="checkbox"] {
    position: absolute !important;
    opacity: 0 !important;
    width: 0 !important;
    height: 0 !important;
    margin: 0 !important;
    pointer-events: none !important;
}

/* Label — purely a layout wrapper, no visible chrome of its own */
.fluentform .ff-el-form-check label,
.fluentform .ff-el-form-check .ff-el-form-check-label {
    background: transparent !important;
    border: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    box-shadow: none !important;
    cursor: pointer !important;
    display: inline-block !important;
    line-height: 0 !important;  /* squash baseline gap so chip is tight */
}

/* The SPAN is the visible chip — chip styling lives here */
.fluentform .ff-el-form-check label > span,
.fluentform .ff-el-form-check .ff-el-form-check-label > span {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    background: var(--mdw-paper-2) !important;
    background-image: none !important;
    border: 1px solid var(--mdw-line) !important;
    border-radius: 999px !important;
    padding: 8px 16px !important;
    font-size: 13.5px !important;
    line-height: 1.2 !important;
    font-family: var(--mdw-font) !important;
    color: var(--mdw-ink-2) !important;
    cursor: pointer !important;
    text-transform: none !important;
    letter-spacing: normal !important;
    font-weight: 400 !important;
    box-shadow: none !important;
    transition: background .15s, border-color .15s, color .15s !important;
}
.fluentform .ff-el-form-check:not(.ff_item_selected) label:hover > span {
    background: var(--mdw-paper) !important;
    border-color: var(--mdw-line-2) !important;
}

/* Selected chip — FF marks the wrapper div with .ff_item_selected.
   Beat FF's `.ff-el-group.ff_list_buttons .ff-el-form-check.ff_item_selected label>span`
   rule with same specificity + !important. */
.fluentform .ff-el-form-check.ff_item_selected label > span,
.fluentform .ff-el-group.ff_list_buttons .ff-el-form-check.ff_item_selected label > span,
.fluentform .ff-el-form-check.ff_item_selected .ff-el-form-check-label > span,
.fluentform .ff-el-form-check label:has(input:checked) > span {
    background: var(--mdw-ink) !important;
    background-image: none !important;
    border-color: var(--mdw-ink) !important;
    color: var(--mdw-paper) !important;
    box-shadow: none !important;
}

/* Hide the native circle/square indicator inside the chip label */
.fluentform .ff-el-form-check label::before,
.fluentform .ff-el-form-check label::after { display: none !important; }

/* --- Hide ALL Fluent Forms built-in progress indicators ---
       (mockup uses no progress UI; multi-step nav is via Back/Continue only) */
.fluentform .ff-step-titles,
.fluentform .ff-step-header,
.fluentform .ff-el-progress-title,
.fluentform .ff_progress_bar,
.fluentform .ff-el-progress-bar,
.fluentform .ff-el-progress,
.fluentform .ff_progress_indicator,
.fluentform .ff-step-progress,
.fluentform .ff-step-progress-status,
.fluentform .ff_step_progress_bar,
.fluentform .ff-step-body > .ff-progress,
.fluentform .ff-step-progress-bar,
.fluentform .ff-step-titles-wrapper,
.fluentform [class*="progress-status"],
.fluentform [class*="progress_status"],
.fluentform .ff-el-step-titles,
.fluentform .ff-el-step-progress {
    display: none !important;
}

/* --- Step navigation buttons (Back / Continue / Submit) --- */
.fluentform .ff-stepper-buttons,
.fluentform .ff-el-stepper-nav,
.fluentform .step-nav-wrapper {
    display: flex !important;
    gap: 10px !important;
    justify-content: space-between !important;
    margin-top: 28px !important;
}
.fluentform .ff-btn,
.fluentform .ff-btn-submit,
.fluentform button[type="submit"],
.fluentform .ff_btn_md,
.fluentform .ff_btn_lg {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 12px 20px !important;
    font-family: var(--mdw-font) !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    background: var(--mdw-ink) !important;
    background-image: none !important;
    color: var(--mdw-paper) !important;
    border: 1px solid var(--mdw-ink) !important;
    border-radius: 999px !important;
    cursor: pointer !important;
    text-transform: none !important;
    letter-spacing: normal !important;
    box-shadow: none !important;
    transition: transform .2s, background .2s !important;
}
.fluentform .ff-btn:hover,
.fluentform .ff-btn-submit:hover,
.fluentform button[type="submit"]:hover {
    background: var(--mdw-sage-deep) !important;
    border-color: var(--mdw-sage-deep) !important;
    transform: translateY(-1px) !important;
}
.fluentform .ff-btn-prev,
.fluentform .ff-btn[data-action="prev"],
.fluentform .ff_step_prev_btn {
    background: transparent !important;
    color: var(--mdw-ink) !important;
    border-color: var(--mdw-line-2) !important;
}
.fluentform .ff-btn-prev:hover,
.fluentform .ff_step_prev_btn:hover {
    background: var(--mdw-paper-2) !important;
    color: var(--mdw-ink) !important;
}

/* --- Inline error messages --- */
.fluentform .ff-el-is-error .text-danger,
.fluentform .error,
.fluentform .ff-el-form-control.error {
    color: #c14545 !important;
    font-family: var(--mdw-mono) !important;
    font-size: 11.5px !important;
    margin-top: 6px !important;
    background: transparent !important;
}

/* --- Step section headers (custom_html elements) --- */
.fluentform .ff_columns h3,
.fluentform .ff-el-form-html h3,
.fluentform [data-name="custom_html"] h3 {
    font-family: var(--mdw-font) !important;
    font-size: clamp(28px, 4vw, 44px) !important;
    font-weight: 500 !important;
    letter-spacing: -0.025em !important;
    color: var(--mdw-ink) !important;
    margin: 0 0 8px !important;
    line-height: 1.1 !important;
}
.fluentform .ff_columns h4,
.fluentform .ff-el-form-html h4 {
    font-family: var(--mdw-font) !important;
    font-size: 18px !important;
    font-weight: 500 !important;
    color: var(--mdw-ink-2) !important;
    margin: 24px 0 12px !important;
}
.fluentform .ff_columns p,
.fluentform .ff-el-form-html p {
    color: var(--mdw-gray) !important;
    font-size: 14.5px !important;
    line-height: 1.55 !important;
    margin: 0 0 24px !important;
    font-family: var(--mdw-font) !important;
}

/* --- Confirmation success message --- */
.fluentform .ff-message-success,
.ff-message-success {
    background: var(--mdw-paper-2) !important;
    border-radius: 12px !important;
    padding: 28px 24px !important;
    text-align: center !important;
    color: var(--mdw-ink) !important;
    border: 1px solid var(--mdw-sage-soft) !important;
    font-family: var(--mdw-font) !important;
}

/* --- Sidebar progress states (wired by vibe-check.progress.js) --- */
/* Active step row */
.progress-step.is-active .ps-n { color: var(--mdw-sage-deep); }
.progress-step.is-active .ps-t { color: var(--mdw-ink); font-weight: 500; }
.progress-step.is-active .ps-tag { color: var(--mdw-sage-deep); }
.progress-step.is-active { padding-left: 8px; }
/* Completed step row — strikethrough title + checkmark before number */
.progress-step.is-done .ps-n { color: var(--mdw-sage-deep); position: relative; padding-left: 14px; }
.progress-step.is-done .ps-n::before {
    content: "✓";
    position: absolute; left: 0; top: 0;
    color: var(--mdw-sage-deep);
    font-size: 11px;
}
.progress-step.is-done .ps-t {
    color: var(--mdw-gray);
    text-decoration: line-through;
    text-decoration-color: var(--mdw-gray-2);
    text-decoration-thickness: 1px;
}
.progress-step.is-done .ps-tag { color: var(--mdw-gray-2); }
.progress-step.is-done { opacity: .85; }


/* mdw site-level defensive reset — neutralize kit/theme global typography defaults so source CSS wins as authored */
:where(h1, h2, h3, h4, h5, h6, p, span, div, li, a, button) { text-transform: none; }
:where(h1, h2, h3, h4, h5, h6, p) { text-align: left; }
:where(.elementor-heading-title) { text-align: inherit; }

/* ===== Pseudo-element rules (preserved from source) ===== */

/* pseudo-element rule preserved verbatim from source */
.hero h1 .mark::before{
    content:""; position:absolute; inset: 0.08em -0.02em 0.12em -0.02em;
    background: var(--sage-soft);
    z-index:-1;
    border-radius:2px;
    opacity:0.55;
  }

/* pseudo-element rule preserved verbatim from source */
.svc-desc li::before{ content:"+ "; color:var(--sage); }

/* pseudo-element rule preserved verbatim from source */
.progress-step.is-done .ps-n::before{ content: "✓ "; color: var(--sage-deep); }

/* ===== Source mockup CSS (verbatim) ===== */

:root{
    /* Palette - warmer white, tech-y neutrals, restrained sage */
    --paper:      #FAFAF8;
    --paper-2:    #F2F1EC;
    --ink:        #0E110F;
    --ink-2:      #2B302D;
    --gray:       #6F726D;
    --gray-2:     #B7B8B1;
    --line:       #E4E3DC;
    --line-2:     #D2D1C9;
    --sage:       #7B8E7C;   /* the logo green */
    --sage-deep:  #5F7260;
    --sage-soft:  #C7D1C4;

    --max:     1360px;
    --gutter:  clamp(20px, 4vw, 48px);
    --font:    "Geist", ui-sans-serif, system-ui, sans-serif;
    --mono:    "Geist Mono", ui-monospace, monospace;
  }

  *{box-sizing:border-box}
  html,body{margin:0;padding:0}
  html{scroll-behavior:smooth}
  body{
    background:var(--paper);
    color:var(--ink);
    font-family: var(--font);
    font-weight:400;
    font-size:17px;
    line-height:1.55;
    -webkit-font-smoothing:antialiased;
    text-rendering:optimizeLegibility;
    overflow-x:hidden;
  }
  ::selection{ background:var(--sage); color:var(--paper); }
  a{ color:inherit; text-decoration:none }
  img{ display:block; max-width:100% }
  button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer }


/* ---------- Layout ---------- */
  .wrap{ max-width:var(--max); margin:0 auto; padding:0 var(--gutter); position:relative }
  .rule{ height:1px; background:var(--line); border:0; margin:0 }

  /* ---------- Nav ---------- */
  .nav{
    position:sticky; top:0; z-index:50;
    background:color-mix(in oklab, var(--paper) 92%, transparent);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-bottom:1px solid var(--line);
  }
  .nav-inner{
    display:grid;
    grid-template-columns: 1fr auto 1fr;
    align-items:center;
    padding:18px 0;
    gap:24px;
  }
  .nav-brand{ display:flex; align-items:center; gap:10px; font-weight:600; letter-spacing:-0.01em; }
  .nav-brand img{ width:28px; height:28px; }
  .nav-brand small{
    font-family:var(--mono); font-size:11px; font-weight:400;
    color:var(--gray); margin-left:10px; padding-left:12px;
    border-left:1px solid var(--line);
  }
  .nav-links{ display:flex; gap:28px; justify-content:center; font-size:14.5px; color:var(--ink-2); }
  .nav-links a{ position:relative; padding:4px 0; }
  .nav-links a:hover{ color:var(--sage-deep); }
  .nav-cta{ justify-self:end; }

  .btn{
    display:inline-flex; align-items:center; gap:10px;
    padding:11px 18px 11px 16px;
    background:var(--ink); color:var(--paper);
    border-radius:999px;
    font-size:14px; font-weight:500; letter-spacing:-0.005em;
    transition: transform .2s ease, background .2s ease;
  }
  .btn:hover{ background:var(--sage-deep); transform: translateY(-1px); }
  .btn .dot{ width:7px; height:7px; border-radius:50%; background:#90E37E; box-shadow:0 0 0 3px rgba(144,227,126,.22); }
  .btn-ghost{ background:transparent; color:var(--ink); border:1px solid var(--line-2); }
  .btn-ghost:hover{ background:var(--paper-2); color:var(--ink); }

  /* ---------- Hero ---------- */
  .hero{ padding: clamp(80px, 14vh, 160px) 0 clamp(80px, 12vh, 140px); }
  .hero h1{
    font-family:var(--font);
    font-size: clamp(56px, 10vw, 172px);
    line-height: 0.92;
    letter-spacing: -0.055em;
    font-weight: 500;
    margin: 0 0 40px;
    color:var(--ink);
    max-width: 13ch;
  }
  .hero h1 .accent{ color:var(--sage-deep); font-weight:500; }
  .hero h1 .mark{
    display:inline-block; position:relative;
    padding: 0 0.12em;
  }
  .hero h1 .mark::before{
    content:""; position:absolute; inset: 0.08em -0.02em 0.12em -0.02em;
    background: var(--sage-soft);
    z-index:-1;
    border-radius:2px;
    opacity:0.55;
  }
  .hero-sub-row{
    display:grid;
    grid-template-columns: 1.2fr 1fr;
    gap: clamp(40px, 6vw, 96px);
    align-items:end;
    margin-top: clamp(32px, 6vh, 72px);
    padding-top: 28px;
    border-top:1px solid var(--line);
  }
  .hero-lede{
    font-size: clamp(18px, 1.6vw, 22px);
    line-height:1.5;
    color:var(--ink-2);
    max-width: 46ch;
    letter-spacing:-0.005em;
  }
  .hero-ctas{ display:flex; gap:12px; align-items:center; justify-content:flex-end; flex-wrap:wrap; }

  .hero-stats{
    display:grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
    margin-top: clamp(60px, 10vh, 110px);
    border-top:1px solid var(--line);
    border-bottom:1px solid var(--line);
  }
  .stat{ padding: 24px 28px; border-left:1px solid var(--line); }
  .stat:first-child{ border-left:0; padding-left:0; }
  .stat:last-child{ padding-right:0; }
  .stat .v{ font-size: clamp(26px, 2.6vw, 36px); letter-spacing:-0.03em; font-weight:500; color:var(--ink); }
  .stat .k{ font-family:var(--mono); font-size:11.5px; color:var(--gray); margin-top:6px; letter-spacing:0.02em; }

  /* ---------- Section shell ---------- */
  section{ padding: clamp(80px, 13vh, 140px) 0; position:relative; }
  section + section{ border-top:1px solid var(--line); }

  .sec-head{
    display:grid;
    grid-template-columns: 1fr auto;
    gap: clamp(20px, 3vw, 48px);
    align-items:end;
    margin-bottom: clamp(48px, 7vh, 88px);
  }
  .sec-num{ display:none; }
  .sec-title{
    font-size: clamp(36px, 5.5vw, 76px);
    line-height: 0.98;
    letter-spacing: -0.035em;
    font-weight: 500;
    margin:0;
    max-width: 18ch;
  }
  .sec-title em{ font-style:italic; color:var(--sage-deep); font-weight:500; }
  .sec-kicker{
    font-family:var(--mono); font-size:11.5px;
    color:var(--gray); letter-spacing:0.02em;
    padding-top:14px; max-width:220px; text-align:right; line-height:1.5;
  }

  /* ---------- Services ---------- */
  .services{ display:block; }
  .services .spacer{ display:none; }
  .svc-list{ border-top:1px solid var(--line); }
  .svc{
    display:grid;
    grid-template-columns: 40px 1.5fr 2fr auto;
    gap: clamp(16px, 2.5vw, 40px);
    align-items:start;
    padding: 28px 0 32px;
    border-bottom:1px solid var(--line);
    position:relative;
    transition: background .25s ease;
  }
  .svc:hover{ background: color-mix(in oklab, var(--paper-2) 60%, transparent); }
  .svc-n{ font-family:var(--mono); font-size:12px; color:var(--gray); padding-top:10px; }
  .svc-name{
    font-size: clamp(22px, 2.2vw, 32px);
    font-weight:500; letter-spacing:-0.025em; line-height:1.1;
  }
  .svc-desc{ font-size:15.5px; color:var(--ink-2); max-width:48ch; }
  .svc-desc ul{ margin:10px 0 0; padding:0; list-style:none; font-family:var(--mono); font-size:12.5px; color:var(--gray); display:flex; flex-wrap:wrap; gap:8px 14px; }
  .svc-desc li::before{ content:"+ "; color:var(--sage); }
  .svc-arrow{
    padding-top:10px;
    font-family:var(--mono); font-size:16px; color:var(--gray);
    transition: color .2s ease, transform .2s ease;
  }
  .svc:hover .svc-arrow{ color:var(--sage-deep); transform: translate(4px, -4px); }

  /* ---------- Manifesto (big statement block) ---------- */
  .manifesto{
    padding: clamp(100px, 16vh, 180px) 0;
    background: var(--ink);
    color: var(--paper);
    position:relative;
  }
  .manifesto .wrap{ }
  .manifesto-kicker{
    font-family:var(--mono); font-size:12px;
    color:var(--sage-soft); letter-spacing:0.02em;
    margin-bottom: clamp(36px, 6vh, 64px);
    display:flex; gap:12px; align-items:center;
  }
  .manifesto-kicker .bar{ flex:0 0 40px; height:1px; background:var(--sage-soft); opacity:.5; }
  .manifesto h2{
    font-size: clamp(36px, 5.6vw, 88px);
    line-height: 1.02;
    letter-spacing: -0.035em;
    font-weight: 400;
    margin:0;
    max-width: 22ch;
  }
  .manifesto h2 .fade{ color: color-mix(in oklab, var(--paper) 50%, transparent); }
  .manifesto h2 em{ font-style:italic; color:var(--sage-soft); font-weight:400; }
  .manifesto-foot{
    display:grid; grid-template-columns: repeat(3, 1fr);
    gap:32px;
    margin-top: clamp(60px, 10vh, 100px);
    padding-top: 32px;
    border-top:1px solid color-mix(in oklab, var(--paper) 18%, transparent);
  }
  .manifesto-foot .item{ max-width: 36ch; }
  .manifesto-foot .k{ font-family:var(--mono); font-size:11.5px; color:var(--sage-soft); letter-spacing:0.02em; margin-bottom:10px; }
  .manifesto-foot .v{ font-size:15.5px; line-height:1.55; color: color-mix(in oklab, var(--paper) 80%, transparent); }

  /* ---------- Work ---------- */
  .work-list{ display:block; }
  .work-list .spacer{ display:none; }
  .work-rows{ border-top:1px solid var(--line); }
  .work-row-wrap{ border-bottom: 1px solid var(--line); }
  .work-row{
    width:100%;
    text-align:left;
    display:grid;
    grid-template-columns: 60px 2fr 1fr 1fr auto;
    align-items:center;
    gap: 24px;
    padding: 28px 0;
    transition: padding .25s ease, background .2s ease;
    color: var(--ink);
  }
  .work-row:hover{ padding-left: 14px; background: color-mix(in oklab, var(--paper-2) 55%, transparent); }
  .work-row .idx{ font-family:var(--mono); font-size:12px; color:var(--gray); }
  .work-row .title{ font-size: clamp(18px, 1.8vw, 24px); font-weight:500; letter-spacing:-0.02em; }
  .work-row .cat, .work-row .yr{ font-family:var(--mono); font-size:12px; color:var(--gray); letter-spacing:0.01em; }
  .work-row .arrow{ font-family:var(--mono); font-size:22px; color:var(--gray); transition: transform .3s ease, color .2s ease; line-height:1; }
  .work-row-wrap.open .work-row{ background: color-mix(in oklab, var(--paper-2) 55%, transparent); }
  .work-row-wrap.open .work-row .arrow{ transform: rotate(45deg); color: var(--sage-deep); }
  .work-row-wrap.open .work-row .title{ color: var(--sage-deep); }

  .work-detail{
    max-height: 0;
    overflow: hidden;
    transition: max-height .5s cubic-bezier(.2,.8,.2,1);
  }
  .work-row-wrap.open .work-detail{
    max-height: 1400px;
  }
  .work-detail > .case{
    border-top: 0;
    border-bottom: 0;
    padding: clamp(20px, 3vh, 36px) 0 clamp(28px, 4vh, 56px);
  }

  /* ---------- Process ---------- */
  .process-body{ display:block; }
  .process-body .spacer{ display:none; }
  .steps{ display:grid; grid-template-columns: repeat(4, 1fr); gap:0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
  .step{
    padding: 32px 28px 36px;
    border-left:1px solid var(--line);
  }
  .step:first-child{ border-left:0; padding-left:0; }
  .step:last-child{ padding-right:0; }
  .step-n{ font-family:var(--mono); font-size:12px; color:var(--gray); margin-bottom:24px; }
  .step-n .wk{ color:var(--ink); margin-left:8px; }
  .step-t{ font-size: clamp(20px, 1.8vw, 26px); font-weight:500; letter-spacing:-0.025em; margin-bottom:14px; line-height:1.15; }
  .step-d{ font-size:14.5px; color:var(--ink-2); line-height:1.5; }

  /* ---------- Stack ---------- */
  .stack-body{ display:block; }
  .stack-body .spacer{ display:none; }
  .stack-grid{
    display:grid; grid-template-columns: repeat(3, 1fr); gap: 1px;
    background: var(--line);
    border:1px solid var(--line);
  }
  .tech{
    background: var(--paper);
    padding: 22px 24px;
    display:flex; flex-direction:column; gap:6px;
    transition: background .2s ease;
  }
  .tech:hover{ background: var(--paper-2); }
  .tech .n{ font-family:var(--mono); font-size:11px; color:var(--gray); }
  .tech .t{ font-size:17px; font-weight:500; letter-spacing:-0.01em; }
  .tech .d{ font-size:13.5px; color:var(--gray); }

  /* ---------- About ---------- */
  .about-body{
    display:grid; grid-template-columns: 1.2fr 1fr;
    gap: clamp(32px, 5vw, 80px);
  }
  .about-lead{
    font-size: clamp(22px, 2.2vw, 30px);
    line-height:1.35; letter-spacing:-0.02em;
    color:var(--ink); font-weight:400;
  }
  .about-lead em{ font-style:italic; color:var(--sage-deep); }
  .about-side{ font-size:15px; color:var(--ink-2); line-height:1.6; }
  .about-side p{ margin:0 0 14px; }
  .about-sig{
    margin-top:20px; padding-top:18px; border-top:1px solid var(--line);
    font-family:var(--mono); font-size:12px; color:var(--gray); letter-spacing:0.02em;
    display:flex; justify-content:space-between;
  }

  /* ---------- FAQ ---------- */
  .faq-body{ display:block; }
  .faq-body .spacer{ display:none; }
  .faq-list{ border-top:1px solid var(--line); }
  .faq-item{ border-bottom:1px solid var(--line); }
  .faq-q{
    width:100%; text-align:left;
    padding: 22px 0;
    display:grid; grid-template-columns: 40px 1fr auto; gap:24px; align-items:center;
    font-size: clamp(18px, 1.6vw, 22px);
    font-weight:500; letter-spacing:-0.02em; color:var(--ink);
  }
  .faq-q .i{ font-family:var(--mono); font-size:12px; color:var(--gray); font-weight:400; }
  .faq-q .plus{ font-family:var(--mono); font-size:20px; color:var(--gray); transition: transform .25s ease; }
  .faq-item.open .faq-q .plus{ transform: rotate(45deg); color:var(--sage-deep); }
  .faq-a{
    max-height:0; overflow:hidden;
    transition: max-height .35s ease;
  }
  .faq-item.open .faq-a{ max-height:300px; }
  .faq-a-inner{
    padding: 0 0 24px 64px;
    max-width: 70ch;
    font-size:15.5px; color:var(--ink-2); line-height:1.6;
  }

  /* ---------- CTA ---------- */
  .cta{
    padding: clamp(100px, 14vh, 160px) 0;
    text-align:left;
  }
  .cta h2{
    font-size: clamp(44px, 7.5vw, 120px);
    line-height: 0.95;
    letter-spacing: -0.045em;
    font-weight: 500;
    margin:0 0 36px;
    max-width: 14ch;
  }
  .cta h2 em{ font-style:italic; color:var(--sage-deep); font-weight:500; }
  .cta .row{
    display:flex; gap:16px; flex-wrap:wrap; align-items:center;
    margin-top: 32px;
  }
  .cta .mail{
    font-family:var(--mono); font-size:14px; color:var(--ink-2);
    padding: 11px 16px; border:1px solid var(--line-2); border-radius:999px;
  }

  /* ---------- Footer ---------- */
  footer{ border-top:1px solid var(--line); padding: 48px 0 36px; background: var(--paper-2); }
  .foot-grid{ display:grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 32px; }
  .foot-brand{ max-width:32ch; }
  .foot-brand .logo-row{ display:flex; align-items:center; gap:10px; font-weight:600; font-size:18px; letter-spacing:-0.015em; margin-bottom:12px; }
  .foot-brand .logo-row img{ width:30px; height:30px; }
  .foot-brand p{ font-size:14px; color:var(--ink-2); line-height:1.55; margin:0 0 16px; }
  .foot-col h5{
    font-family:var(--mono); font-size:11.5px; color:var(--gray);
    font-weight:400; letter-spacing:0.02em; text-transform:none;
    margin:0 0 14px;
  }
  .foot-col ul{ margin:0; padding:0; list-style:none; }
  .foot-col li{ font-size:14px; color:var(--ink-2); padding:3px 0; }
  .foot-col li a:hover{ color:var(--sage-deep); }
  .foot-bottom{
    display:flex; justify-content:space-between; align-items:center;
    margin-top:48px; padding-top:18px; border-top:1px solid var(--line);
    font-family:var(--mono); font-size:11.5px; color:var(--gray);
  }

  /* ---------- Reveal animation (disabled - content is visible by default) ---------- */

  /* ---------- Case study ---------- */
  .case{
    display:grid;
    grid-template-columns: 1.05fr 1fr;
    gap: clamp(28px, 4vw, 64px);
    border-top:1px solid var(--line);
    border-bottom:1px solid var(--line);
    padding: clamp(28px, 4vh, 56px) 0;
    align-items:stretch;
  }
  .case-shot{
    background: var(--paper-2);
    border:1px solid var(--line);
    aspect-ratio: 4/3;
    position:relative;
    overflow:hidden;
    align-self: start;
    width: 100%;
  }
  .case-shot-inner{
    position:absolute; inset:0;
    background:
      linear-gradient(180deg, rgba(255,255,255,0.0) 0%, rgba(0,0,0,0.04) 100%),
      repeating-linear-gradient(135deg,
        var(--paper-2) 0 14px,
        var(--paper) 14px 28px);
  }
  .case-shot-stripes{ display:none; }
  .case-shot-label{
    position:absolute; left:14px; top:12px;
    font-family:var(--mono); font-size:11px; color:var(--gray);
    letter-spacing:0.02em;
  }
  .case-shot-size{
    position:absolute; right:14px; bottom:12px;
    font-family:var(--mono); font-size:11px; color:var(--gray);
    letter-spacing:0.02em;
    background: color-mix(in oklab, var(--paper) 80%, transparent);
    padding: 4px 8px;
    border: 1px solid var(--line);
  }
  .case-body{ display:flex; flex-direction:column; gap:18px; padding-top:6px; }
  .case-meta{
    font-family:var(--mono); font-size:12px; color:var(--gray);
    display:flex; gap:8px; flex-wrap:wrap;
  }
  .case-title{
    margin:0;
    font-size: clamp(26px, 3vw, 40px);
    line-height:1.15; letter-spacing:-0.025em;
    font-weight:500; color:var(--ink);
    max-width: 22ch;
  }
  .case-body-p{
    margin:0;
    font-size: 16px; line-height:1.6;
    color:var(--ink-2);
    max-width: 52ch;
  }
  .case-stats{
    display:grid; grid-template-columns: repeat(3, 1fr);
    gap: 0;
    border-top:1px solid var(--line);
    margin-top: 4px;
  }
  .case-stat{ padding: 18px 24px; border-left:1px solid var(--line); }
  .case-stat:first-child{ border-left:0; padding-left:0; }
  .case-stat:last-child{ padding-right:0; }
  .case-stat .k{ font-family:var(--mono); font-size:11px; color:var(--gray); margin-bottom:6px; }
  .case-stat .v{
    font-size: clamp(20px, 2vw, 26px);
    font-weight:500; letter-spacing:-0.02em;
    color: var(--ink);
  }
  .case-stat .v span{ color: var(--sage-deep); margin: 0 2px; }
  .case-quote{
    border-top:1px solid var(--line);
    padding-top: 18px;
    margin-top: 4px;
  }
  .case-quote p{
    margin:0;
    font-size: 17px; line-height:1.5;
    color: var(--ink);
    font-style: italic;
    max-width: 48ch;
  }
  .case-quote-by{
    margin-top: 10px;
    font-family:var(--mono); font-size:12px; color:var(--gray);
    display:flex; gap:8px; flex-wrap:wrap;
  }

  /* ---------- Voices (testimonials) ---------- */
  .voices-grid{
    display:grid; grid-template-columns: repeat(3, 1fr);
    gap: 0;
    border-top:1px solid var(--line);
    border-bottom:1px solid var(--line);
  }
  .voice{
    margin:0;
    padding: 32px 28px 32px 0;
    border-right: 1px solid var(--line);
    display:flex; flex-direction:column; gap:18px;
  }
  .voice:nth-child(2){ padding-left: 28px; }
  .voice:nth-child(3){ padding-left: 28px; border-right:0; }
  .voice blockquote{
    margin:0;
    font-size: clamp(17px, 1.5vw, 20px);
    line-height:1.5; letter-spacing:-0.01em;
    color: var(--ink);
  }
  .voice figcaption{
    margin-top:auto;
    font-family:var(--mono); font-size:12px; color:var(--gray);
    display:flex; gap:8px; flex-wrap:wrap;
    padding-top: 14px;
    border-top: 1px solid var(--line);
  }

  /* ---------- CTA fit line ---------- */
  .cta-fit{
    max-width: 60ch;
    margin: 24px 0 0;
    font-size: 16px; line-height:1.6;
    color: var(--ink-2);
  }
  .cta-fit strong{ color: var(--ink); font-weight:500; }

  /* ---------- Responsive ---------- */
  @media (max-width: 900px){
    .nav-inner{ grid-template-columns: 1fr auto; }
    .nav-links{ display:none; }
    .hero-sub-row{ grid-template-columns: 1fr; align-items:start; }
    .hero-ctas{ justify-content:flex-start; }
    .hero-stats{ grid-template-columns: repeat(2,1fr); }
    .stat:nth-child(3){ border-left:0; padding-left:0; }
    .sec-head{ grid-template-columns: 1fr; }
    .sec-kicker{ text-align:left; max-width:none; padding-top:0; }
    .services, .work-list, .process-body, .stack-body, .about-body, .faq-body{ grid-template-columns: 1fr; }
    .svc{ grid-template-columns: 24px 1fr auto; }
    .svc-desc{ grid-column: 2 / span 2; }
    .steps{ grid-template-columns: 1fr 1fr; }
    .step:nth-child(3){ border-left:0; padding-left:0; }
    .stack-grid{ grid-template-columns: 1fr 1fr; }
    .work-row{ grid-template-columns: 32px 2fr 1fr auto; }
    .work-row .yr{ display:none; }
    .about-body{ grid-template-columns: 1fr; }
    .foot-grid{ grid-template-columns: 1fr 1fr; }
    .manifesto-foot{ grid-template-columns: 1fr; }
    .case{ grid-template-columns: 1fr; padding: 24px 0; }
    .case-stats{ grid-template-columns: 1fr; }
    .case-stat{ border-right:0; border-bottom:1px solid var(--line); padding: 16px 0; }
    .case-stat:last-child{ border-bottom:0; }
    .voices-grid{ grid-template-columns: 1fr; }
    .voice{ border-right:0; border-bottom:1px solid var(--line); padding: 28px 0 !important; }
    .voice:last-child{ border-bottom:0; }
  }


/* ==========================================================
   Hello / intake form styles
   Pairs with styles/base.css (tokens) + styles/layout.css (nav, footer).
   ========================================================== */

/* ---------- Page shell ---------- */
:root{
  --nav-h: 83px;          /* matches actual rendered nav height */
}
.hello-shell{
  min-height: calc(100vh - var(--nav-h));
  border-top: 1px solid var(--line);
}
.hello-grid{
  display:grid;
  grid-template-columns: minmax(300px, 420px) minmax(0, 1fr);
  gap: 0;
  min-height: calc(100vh - var(--nav-h));
  align-items: stretch;
}

/* ---------- Left rail (brand panel) ---------- */
.hello-rail{
  position: sticky; top: var(--nav-h);
  align-self: start;
  max-height: calc(100vh - var(--nav-h));
  overflow-y: auto;
  background: var(--paper-2);
  border-right: 1px solid var(--line);
  padding: clamp(28px, 3.5vw, 48px) clamp(28px, 3.5vw, 48px) clamp(24px, 3vw, 36px);
  display:flex; flex-direction:column; gap: 24px;
  scrollbar-width: thin;
}
.hello-rail-kicker{
  font-family: var(--mono); font-size: 11.5px;
  color: var(--gray); letter-spacing: 0.02em;
  display:flex; align-items:center; gap: 12px;
}
.hello-rail-kicker .bar{ flex: 0 0 28px; height:1px; background: var(--line-2); }

.hello-rail-title{
  font-size: clamp(30px, 3vw, 46px);
  line-height: 1.0; letter-spacing: -0.035em;
  font-weight: 500; margin: 0;
  max-width: 14ch; color: var(--ink);
}
.hello-rail-title em{ font-style: italic; color: var(--sage-deep); font-weight: 500; }

.hello-rail-lede{
  font-size: 14.5px; line-height: 1.55;
  color: var(--ink-2); max-width: 40ch; margin: 0;
}

/* progress */
.progress{
  margin-top: auto;
  padding-top: 24px;
  display:flex; flex-direction:column; gap: 14px;
}
.progress-meta{
  display:flex; justify-content: space-between;
  font-family: var(--mono); font-size: 11.5px;
  color: var(--gray); letter-spacing: 0.02em;
}
.progress-bar{
  height: 2px; width: 100%; background: var(--line);
  position: relative; overflow: hidden;
}
.progress-bar-fill{
  position: absolute; inset: 0 auto 0 0;
  background: var(--sage-deep);
  transition: width .35s cubic-bezier(.2,.8,.2,1);
}

.progress-steps{
  display:flex; flex-direction:column; gap: 2px;
  margin-top: 8px;
  border-top:1px solid var(--line);
}
.progress-step{
  display:grid; grid-template-columns: 24px 1fr auto;
  gap: 12px; align-items: baseline;
  padding: 9px 0;
  border-bottom: 1px solid var(--line);
  font-family: var(--mono); font-size: 12px;
  color: var(--gray);
  cursor: pointer;
  transition: color .2s ease, padding .2s ease;
}
.progress-step:hover{ color: var(--ink); }
.progress-step .ps-n{ font-size: 10.5px; color: var(--gray-2); }
.progress-step .ps-t{ color: var(--ink-2); font-family: var(--font); font-size: 13.5px; letter-spacing: -0.005em; }
.progress-step .ps-tag{ font-size: 10.5px; color: var(--gray-2); }
.progress-step.is-active{ background: transparent; padding-left: 8px; }
.progress-step.is-active .ps-n{ color: var(--sage-deep); }
.progress-step.is-active .ps-t{ color: var(--ink); font-weight: 500; }
.progress-step.is-active .ps-tag{ color: var(--sage-deep); }
.progress-step.is-done .ps-n::before{ content: "✓ "; color: var(--sage-deep); }
.progress-step.is-done .ps-n{ color: var(--sage-deep); }

/* ---------- Right pane (form) ---------- */
.hello-form{
  padding: clamp(40px, 4.5vw, 72px) clamp(28px, 4vw, 72px) clamp(48px, 6vw, 96px);
  max-width: 760px;
  width: 100%;
}

.step{
  display: none;
}
.step.is-active{
  display: block;
  animation: stepIn .35s cubic-bezier(.2,.8,.2,1);
}
@keyframes stepIn{
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

.step-head{
  margin-bottom: clamp(28px, 4vh, 44px);
  padding-bottom: 24px;
  border-bottom: 1px solid var(--line);
}
.step-eyebrow{
  font-family: var(--mono); font-size: 11.5px;
  color: var(--gray); letter-spacing: 0.04em;
  margin-bottom: 14px;
  display:flex; gap: 10px; align-items:center;
}
.step-eyebrow .num{ color: var(--sage-deep); }
.step-eyebrow .of{ color: var(--gray-2); }
.step-h{
  font-size: clamp(26px, 2.8vw, 38px);
  line-height: 1.05; letter-spacing: -0.03em;
  font-weight: 500; margin: 0 0 10px;
  color: var(--ink); max-width: 22ch;
}
.step-h em{ font-style: italic; color: var(--sage-deep); font-weight: 500; }
.step-sub{
  font-size: 15px; color: var(--ink-2); line-height: 1.55;
  max-width: 60ch; margin: 0;
}

/* ---------- Field groupings ---------- */
.fields{
  display: flex; flex-direction: column;
  gap: clamp(22px, 2.8vh, 32px);
}
.field-row-2{
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 20px;
}
.field-row-2 > .field{ margin: 0; }

.field{}
.field-label{
  display:block;
  font-size: 14px; color: var(--ink); font-weight: 500;
  letter-spacing: -0.005em;
  margin-bottom: 8px;
}
.field-hint{
  display:block;
  font-size: 13px; color: var(--gray);
  line-height: 1.5; margin: -2px 0 12px;
  max-width: 60ch;
}
.field-required{ color: var(--sage-deep); margin-left: 4px; }

/* text/email/url inputs */
.input,
.textarea{
  display: block; width: 100%;
  background: var(--paper);
  border: 1px solid var(--line-2);
  border-radius: 4px;
  padding: 12px 14px;
  font: inherit; color: var(--ink);
  font-size: 15px; line-height: 1.4;
  transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
.input:hover,
.textarea:hover{ border-color: var(--gray-2); }
.input:focus,
.textarea:focus{
  outline: 0;
  border-color: var(--sage-deep);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--sage) 25%, transparent);
}
.input::placeholder,
.textarea::placeholder{ color: var(--gray-2); }
.textarea{ min-height: 96px; resize: vertical; line-height: 1.55; }

/* chip-style checkboxes / radios */
.chips{
  display: flex; flex-wrap: wrap; gap: 8px;
}
.chip{
  position: relative;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 14px;
  border: 1px solid var(--line-2);
  border-radius: 999px;
  background: var(--paper);
  font-size: 13.5px; color: var(--ink-2);
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
  user-select: none;
}
.chip:hover{ border-color: var(--gray-2); color: var(--ink); }
.chip input{
  position: absolute; opacity: 0; pointer-events: none;
}
.chip .chip-dot{
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--line-2);
  transition: background .15s ease, box-shadow .15s ease;
}
.chip:has(input:checked){
  background: var(--ink); color: var(--paper); border-color: var(--ink);
}
.chip:has(input:checked) .chip-dot{
  background: var(--sage-soft);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--sage-soft) 30%, transparent);
}

/* segmented (single-choice) */
.segment{
  display:flex; flex-wrap: wrap; gap: 6px;
  padding: 4px;
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-radius: 6px;
  width: fit-content;
}
.segment-item{
  padding: 9px 16px;
  border-radius: 4px;
  font-size: 14px; color: var(--ink-2);
  cursor: pointer;
  transition: background .15s ease, color .15s ease;
  position: relative;
}
.segment-item input{ position:absolute; opacity:0; pointer-events:none; }
.segment-item:hover{ color: var(--ink); }
.segment-item:has(input:checked){
  background: var(--paper); color: var(--ink); font-weight: 500;
  box-shadow: 0 1px 2px rgba(14,17,15,0.08), 0 0 0 1px var(--line);
}

/* card-style radio (visual choices, e.g. light / dark / either) */
.cards{
  display:grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 12px;
}
.card-radio{
  position: relative;
  border: 1px solid var(--line-2);
  border-radius: 6px;
  padding: 18px 18px 16px;
  background: var(--paper);
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease;
}
.card-radio:hover{ border-color: var(--gray-2); }
.card-radio input{ position:absolute; opacity:0; pointer-events:none; }
.card-radio .cr-name{
  font-size: 15px; font-weight: 500; color: var(--ink);
  letter-spacing: -0.005em; margin-bottom: 4px;
}
.card-radio .cr-desc{
  font-size: 13px; color: var(--gray); line-height: 1.45;
}
.card-radio .cr-tick{
  position:absolute; right: 14px; top: 14px;
  width: 16px; height: 16px; border-radius: 50%;
  border: 1px solid var(--line-2);
  background: var(--paper);
  transition: background .15s ease, border-color .15s ease;
}
.card-radio:has(input:checked){
  border-color: var(--sage-deep);
  background: color-mix(in oklab, var(--sage-soft) 22%, var(--paper));
}
.card-radio:has(input:checked) .cr-tick{
  background: var(--sage-deep); border-color: var(--sage-deep);
  box-shadow: inset 0 0 0 3px var(--paper);
}

/* color swatch picker */
.swatches{
  display:flex; flex-wrap: wrap; gap: 8px;
}
.swatch{
  position:relative;
  display:inline-flex; align-items:center; gap: 10px;
  padding: 6px 12px 6px 6px;
  border: 1px solid var(--line-2);
  border-radius: 999px;
  background: var(--paper);
  font-family: var(--mono); font-size: 12px;
  color: var(--ink-2);
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.swatch input{ position:absolute; opacity:0; pointer-events:none; }
.swatch .sw-dot{
  width: 22px; height: 22px; border-radius: 50%;
  border: 1px solid color-mix(in oklab, var(--ink) 12%, transparent);
}
.swatch:has(input:checked){
  background: var(--ink); color: var(--paper); border-color: var(--ink);
}
.swatch:hover{ border-color: var(--gray-2); }

/* file input */
.filewell{
  border: 1px dashed var(--line-2);
  border-radius: 6px;
  padding: 22px;
  background: var(--paper);
  display:flex; align-items:center; justify-content: space-between;
  gap: 16px; flex-wrap: wrap;
}
.filewell .fw-text{ font-size: 14px; color: var(--ink-2); }
.filewell .fw-text small{ display:block; color: var(--gray); margin-top: 2px; font-size: 12px; }
.filewell input[type="file"]{ font-size: 13px; }

/* repeater (inspiration sites) */
.repeater{ display:flex; flex-direction: column; gap: 16px; }
.repeater-row{
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 18px;
  background: var(--paper);
  display: grid; grid-template-columns: 28px 1fr; gap: 14px;
}
.repeater-row .rr-n{
  font-family: var(--mono); font-size: 11.5px;
  color: var(--gray); padding-top: 10px;
}
.repeater-row .rr-body{
  display:flex; flex-direction:column; gap: 12px;
}
.repeater-row .rr-body .field-label{ margin-bottom: 4px; }

/* ---------- Footer / nav buttons ---------- */
.step-foot{
  margin-top: clamp(32px, 4vh, 48px);
  padding: 30px 15px;
  border-top: 1px solid var(--line);
  display:flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap;
}
.step-foot .meta{
  font-family: var(--mono); font-size: 11.5px; color: var(--gray); letter-spacing: 0.02em;
}
.step-foot .actions{
  display:flex; gap: 10px;
}
.btn-prev{
  background: transparent; color: var(--ink-2);
  border: 1px solid var(--line-2);
  padding: 11px 18px;
}
.btn-prev:hover{ background: var(--paper-2); color: var(--ink); }
.btn-next{
  /* uses default .btn from layout.css */
}

/* ---------- Review / submit ---------- */
.review-grid{
  display: flex; flex-direction: column; gap: 0;
  border-top: 1px solid var(--line);
}
.review-section{
  padding: 24px 0;
  border-bottom: 1px solid var(--line);
  display:grid; grid-template-columns: 200px 1fr auto;
  gap: 24px; align-items: start;
}
.review-section .rs-h{
  font-family: var(--mono); font-size: 12px;
  color: var(--gray); letter-spacing: 0.02em;
  padding-top: 4px;
}
.review-section .rs-body{
  display:flex; flex-direction:column; gap: 8px;
}
.review-section .rs-row{
  display:grid; grid-template-columns: 200px 1fr;
  gap: 16px;
  font-size: 14.5px; line-height: 1.5;
}
.review-section .rs-row .k{ color: var(--gray); font-family: var(--mono); font-size: 12.5px; }
.review-section .rs-row .v{ color: var(--ink); white-space: pre-wrap; word-break: break-word; }
.review-section .rs-row .v.empty{ color: var(--gray-2); font-style: italic; }
.review-section .rs-edit{
  font-family: var(--mono); font-size: 12px; color: var(--sage-deep);
  cursor: pointer;
  padding-top: 4px;
}
.review-section .rs-edit:hover{ text-decoration: underline; }

.submit-card{
  margin-top: 32px;
  padding: 28px;
  background: var(--ink); color: var(--paper);
  border-radius: 8px;
  display:flex; align-items:center; justify-content: space-between;
  gap: 24px; flex-wrap: wrap;
}
.submit-card .sc-h{
  font-size: 22px; letter-spacing: -0.02em; font-weight: 500;
  margin: 0 0 4px;
}
.submit-card .sc-d{
  font-size: 14px; color: color-mix(in oklab, var(--paper) 70%, transparent);
  margin: 0; max-width: 50ch; line-height: 1.5;
}
.submit-card .btn{
  background: var(--sage-soft); color: var(--ink);
}
.submit-card .btn:hover{ background: var(--paper); transform: translateY(-1px); }

/* ---------- Done state ---------- */
.done-card{
  text-align: left;
  padding: clamp(48px, 8vh, 96px) 0;
}
.done-card .check{
  width: 56px; height: 56px; border-radius: 50%;
  background: var(--sage-deep); color: var(--paper);
  display:flex; align-items:center; justify-content: center;
  font-size: 24px;
  margin-bottom: 28px;
}
.done-card h2{
  font-size: clamp(36px, 4.5vw, 64px);
  line-height: 1.0; letter-spacing: -0.04em;
  font-weight: 500; margin: 0 0 16px;
  max-width: 18ch;
}
.done-card h2 em{ font-style: italic; color: var(--sage-deep); }
.done-card p{
  font-size: 17px; color: var(--ink-2); line-height: 1.6;
  max-width: 52ch; margin: 0 0 24px;
}

/* ---------- Responsive ---------- */
@media (max-width: 960px){
  .hello-grid{ grid-template-columns: 1fr; }
  .hello-rail{
    position: relative; top: 0;
    max-height: none; overflow: visible;
    border-right: 0; border-bottom: 1px solid var(--line);
    padding: 28px clamp(20px, 4vw, 40px);
  }
  .hello-rail-title{ font-size: 30px; }
  .progress{ margin-top: 0; padding-top: 8px; }
  .progress-steps{ display: none; }
  .hello-form{ padding: 32px clamp(20px, 4vw, 40px) 64px; }
  .field-row-2{ grid-template-columns: 1fr; }
  .review-section{ grid-template-columns: 1fr; }
  .review-section .rs-row{ grid-template-columns: 1fr; gap: 4px; }
  .review-section .rs-row .k{ font-size: 11.5px; }
  .submit-card{ flex-direction: column; align-items: flex-start; }
}/* End custom CSS */
/* Start Custom Fonts CSS */@font-face {
	font-family: 'Geist';
	font-display: auto;
	src: url('https://m-designs.co/wp-content/uploads/2026/04/Geist-VariableFont_wght.ttf') format('truetype');
}
/* End Custom Fonts CSS */