/* ============================================================
   HOMEPAGE — HERO SPLIT
   ============================================================ */
.hero-split { display: grid; grid-template-columns: 1fr 1fr; min-height: calc(100vh - 65px); }
.hero-split__left { position: relative; padding: var(--space-xl) var(--padding-page); display: flex; flex-direction: column; justify-content: center; border-right: 1px solid var(--border); overflow: hidden; animation: fadeUp 0.35s ease 0.05s both; }
.hero-split__left-inner { position: relative; z-index: 1; }
.hero-split__right { padding: var(--space-4) var(--padding-page) var(--space-4) calc(var(--padding-page) + var(--space-xs)); display: flex; flex-direction: column; justify-content: center; background: var(--bg-card); animation: fadeUp 0.35s ease 0.1s both; }

/* ============================================================
   HOMEPAGE — HUMAN STRIP
   ============================================================ */
.human-strip { background: var(--bg-card); border-top: 2px solid var(--gold); border-bottom: 2px solid var(--gold); padding: var(--space-2) var(--padding-page); text-align: center; margin-top: var(--space-md); }
.human-strip p { font-size: 0.9rem; line-height: 1.6; max-width: 700px; margin: 0 auto; }
.human-strip strong { color: var(--white); font-weight: 500; }

/* ============================================================
   CONTACT FORM
   ============================================================ */
.form-kicker { font-size: 0.68rem; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold); margin-bottom: var(--space-xs); }
.form-heading { font-family: 'Outfit', sans-serif; font-size: 2rem; font-weight: 700; color: var(--white); margin-bottom: var(--space-sm); line-height: 1.15; }
.form-subheading { font-size: 0.875rem; color: var(--body-text); margin-bottom: var(--space-2); line-height: 1.65; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-sm); }
.field { position: relative; margin-bottom: 1.5rem; }
.field input, .field textarea { width: 100%; background: rgba(255,255,255,0.04); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.4rem 0.9rem var(--space-xs); font-family: 'DM Sans', sans-serif; font-size: 1rem; color: var(--white); outline: none; transition: border-color 0.2s, background 0.2s; appearance: none; -webkit-appearance: none; display: block; }
.field input::placeholder, .field textarea::placeholder { color: transparent; }
.field label { position: absolute; top: 50%; left: 0.9rem; transform: translateY(-50%); font-size: 1rem; font-weight: 400; color: var(--label-text); pointer-events: none; transition: top 0.18s ease, font-size 0.18s ease, color 0.18s ease, transform 0.18s ease; white-space: nowrap; line-height: 1; }
.field.is-area label { top: 1.1rem; transform: none; }
.field input:focus ~ label, .field input:not(:placeholder-shown) ~ label, .field textarea:focus ~ label, .field textarea:not(:placeholder-shown) ~ label { top: 0.4rem; font-size: 0.65rem; transform: none; color: var(--gold); letter-spacing: 0.07em; text-transform: uppercase; }
.field input:focus, .field textarea:focus { border-color: var(--gold); background: rgba(212,164,76,0.05); }
.field input:focus-visible, .field textarea:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.field textarea { resize: none; height: 100px; padding-top: 1.6rem; }
.field--error input, .field--error textarea { border-color: #e05c5c; background: rgba(224,92,92,0.05); }
.field--error label { color: #e05c5c; }
.field-error { display: block; font-size: 0.68rem; color: #e05c5c; margin-top: 0.35rem; letter-spacing: 0.03em; }
.form-error-msg { font-size: 0.875rem; color: #e05c5c; margin-top: var(--space-1-25); padding: 0.75rem var(--space-sm); background: rgba(224,92,92,0.1); border: 1px solid rgba(224,92,92,0.3); border-radius: var(--radius); outline: none; }
.custom-select-field { position: relative; }
.custom-select-btn { width: 100%; background: rgba(255,255,255,0.04); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.4rem 2.5rem var(--space-xs) 0.9rem; font-family: 'DM Sans', sans-serif; font-size: 1rem; color: var(--white); text-align: left; cursor: pointer; display: block; min-height: 3.5rem; transition: border-color 0.2s, background 0.2s; appearance: none; -webkit-appearance: none; }
.custom-select-btn:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-color: var(--gold); }
.custom-select-field.is-open .custom-select-btn { border-color: var(--gold); background: rgba(212,164,76,0.05); }
.custom-select-value { display: block; min-height: 1.2em; opacity: 0; transition: opacity 0.1s; }
.custom-select-field.has-value .custom-select-value { opacity: 1; }
.select-chevron { position: absolute; right: 0.9rem; top: 50%; transform: translateY(-50%); color: var(--label-text); transition: transform 0.2s ease; flex-shrink: 0; pointer-events: none; }
.custom-select-field.is-open .select-chevron { transform: translateY(-50%) rotate(180deg); }
.custom-select-label { position: absolute; top: 50%; left: 0.9rem; transform: translateY(-50%); font-size: 1rem; font-weight: 400; color: var(--label-text); pointer-events: none; transition: top 0.18s ease, font-size 0.18s ease, color 0.18s ease, transform 0.18s ease; white-space: nowrap; line-height: 1; z-index: 1; }
.custom-select-field.has-value .custom-select-label { top: 0.4rem; font-size: 0.65rem; transform: none; color: var(--gold); letter-spacing: 0.07em; text-transform: uppercase; }
.custom-select-field.is-open:not(.has-value) .custom-select-label { color: var(--gold); }
.custom-select-list { display: none; position: absolute; top: calc(100% + 4px); left: 0; right: 0; background: #1e1e26; border: 1px solid var(--border-mid); border-radius: var(--radius); list-style: none; z-index: 200; overflow: hidden; box-shadow: 0 8px 24px rgba(0,0,0,0.4); }
.custom-select-field.is-open .custom-select-list { display: block; }
.custom-select-list li { padding: 0.85rem var(--space-sm); font-size: 0.95rem; color: var(--body-text); cursor: pointer; transition: background 0.15s, color 0.15s; border-bottom: 1px solid var(--border); }
.custom-select-list li:last-child { border-bottom: none; }
.custom-select-list li:hover, .custom-select-list li:focus, .custom-select-list li[aria-selected="true"] { background: rgba(212,164,76,0.1); color: var(--white); }
.custom-select-list li[aria-selected="true"]::after { content: ' ✓'; color: var(--gold); }
.custom-select-field.field--error .custom-select-btn { border-color: #e05c5c; background: rgba(224,92,92,0.05); }
.custom-select-field.field--error .custom-select-label { color: #e05c5c; }
.btn-submit { margin-top: var(--space-xs); display: flex; align-items: center; justify-content: center; gap: 0.75rem; width: 100%; background: var(--gold); color: #0D0D0F; border: none; border-radius: var(--radius); padding: 0.95rem var(--space-2); font-family: 'Outfit', sans-serif; font-size: 0.8rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; cursor: pointer; transition: background 0.2s, gap 0.2s, transform 0.15s; }
.btn-submit:hover { background: var(--gold-bright); gap: 1.1rem; }
.btn-submit:active { transform: scale(0.99); }
.btn-submit svg { flex-shrink: 0; transition: transform 0.2s; }
.btn-submit:hover svg { transform: translateX(3px); }
.btn-submit:focus-visible { outline: 2px solid var(--white); outline-offset: 3px; }
.btn-submit:disabled { opacity: 0.65; cursor: not-allowed; }
.privacy-note { margin-top: 0.75rem; font-size: 0.72rem; color: var(--label-text); text-align: center; letter-spacing: 0.02em; }
.or-divider { display: flex; align-items: center; gap: 0.85rem; margin: 0.85rem 0; color: var(--label-text); font-size: 0.65rem; letter-spacing: 0.16em; text-transform: uppercase; }
.or-divider::before, .or-divider::after { content: ''; flex: 1; height: 1px; background: var(--border); }
.btn-call { display: flex; align-items: center; justify-content: center; gap: 0.65rem; width: 100%; padding: 0.95rem var(--space-2); border: 1px solid var(--border-mid); border-radius: var(--radius); color: var(--body-text); text-decoration: none; font-family: 'Outfit', sans-serif; font-size: 0.8rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; transition: border-color 0.2s, color 0.2s; }
.btn-call:hover { border-color: var(--gold); color: var(--gold); }
.btn-call:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
.success-msg { display: none; text-align: center; padding: var(--space-lg) var(--space-2); }
.success-msg.show { display: block; animation: fadeUp 0.35s ease both; }
.success-icon { font-size: 2rem; color: var(--gold); margin-bottom: var(--space-sm); }
.success-msg h3 { font-size: 1.6rem; font-weight: 700; margin-bottom: 0.6rem; }
.success-msg p  { font-size: 0.9rem; line-height: 1.7; }

/* ============================================================
   FAQ ACCORDION
   ============================================================ */
.faq-section { background: var(--bg-alt); border-top: 2px solid var(--gold); padding: var(--space-xl) var(--padding-page); }
.faq-inner  { max-width: 860px; margin: 0 auto; }
.faq-title  { margin-bottom: var(--space-3); }
.faq-list   { display: flex; flex-direction: column; }
.faq-item { border-top: 1px solid var(--border); }
.faq-item:last-child { border-bottom: 1px solid var(--border); }
.faq-question { width: 100%; background: none; border: none; text-align: left; padding: 1.4rem 0; display: flex; justify-content: space-between; align-items: center; gap: var(--space-sm); cursor: pointer; color: var(--white); font-family: 'DM Sans', sans-serif; font-size: 0.975rem; font-weight: 500; line-height: 1.4; transition: color 0.2s; }
.faq-question:hover { color: var(--gold); }
.faq-question:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.faq-icon { flex-shrink: 0; width: 20px; height: 20px; border: 1px solid var(--border-mid); border-radius: 50%; display: flex; align-items: center; justify-content: center; transition: transform 0.25s, border-color 0.2s; color: var(--gold); }
.faq-question[aria-expanded="true"] .faq-icon { transform: rotate(45deg); border-color: var(--gold); }
.faq-answer { max-height: 0; overflow: hidden; transition: max-height 0.35s ease; }
.faq-answer.open { max-height: 500px; }
.faq-answer-inner { padding: 0 0 1.5rem; font-size: 0.925rem; line-height: 1.75; }
.faq-answer-inner ul { margin: 0.75rem 0 0 1.1rem; display: flex; flex-direction: column; gap: 0.35rem; }
.faq-answer-inner strong { color: var(--white); font-weight: 500; }

/* ============================================================
   PORTFOLIO GRID
   ============================================================ */
.portfolio-section { padding: var(--space-xl) var(--padding-page); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); background: var(--bg-alt); }
.portfolio-inner { max-width: var(--max-content); margin: 0 auto; }
.portfolio-inner h2 { margin-bottom: var(--space-3); }
.portfolio-grid { gap: var(--space-2); }
.portfolio-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; display: flex; flex-direction: column; transition: border-color 0.2s, transform 0.2s; }
.portfolio-card:hover { border-color: var(--border-mid); transform: translateY(-2px); }
.portfolio-card__img-wrap { aspect-ratio: 3 / 2; overflow: hidden; background: var(--bg); }
.portfolio-card__img-wrap img { width: 100%; height: 100%; object-fit: cover; object-position: top; transition: transform 0.4s ease; display: block; }
.portfolio-card:hover .portfolio-card__img-wrap img { transform: scale(1.03); }
.portfolio-card__body { padding: var(--space-1-5); display: flex; flex-direction: column; flex: 1; }
.portfolio-card__body h3 { margin-bottom: var(--space-xs); }
.portfolio-card__body p  { font-size: 0.875rem; line-height: 1.7; flex: 1; margin-bottom: var(--space-1-25); }
.portfolio-card__link { font-size: 0.75rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--gold); text-decoration: none; transition: color 0.2s, gap 0.2s; display: inline-flex; align-items: center; gap: 0.4rem; margin-top: auto; }
.portfolio-card__link:hover { color: var(--gold-bright); gap: 0.65rem; }
.portfolio-card__link:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; border-radius: 2px; }

@media (max-width: 900px) {
  .hero-split { grid-template-columns: 1fr; min-height: auto; }
  .hero-split__left { padding: var(--space-lg) var(--padding-page) var(--space-3); border-right: none; border-bottom: 1px solid var(--border); }
  .hero-split__right { padding: var(--space-3) var(--padding-page) var(--space-4); }
  .form-row { grid-template-columns: 1fr; gap: 0; }
  .field { margin-bottom: var(--space-md); }
  .field input, .field textarea { font-size: 1rem; padding: 1.5rem var(--space-sm) 0.6rem; }
  .field textarea { height: 110px; padding-top: 1.75rem; }
  .field label, .custom-select-label { left: var(--space-sm); }
  .btn-submit, .btn-call { padding: 1.1rem var(--space-2); }
  .human-strip { padding: var(--space-md) var(--padding-page); }
  .faq-section { padding: var(--space-lg) var(--padding-page); }
  .portfolio-section { padding: var(--space-lg) var(--padding-page); }
  .portfolio-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) { .portfolio-grid { grid-template-columns: 1fr; } }