/* KLG Contact page 2026-10: deep teal hero with the inquiry form, white content sections, Zodiak titles, Spectral text */
:root { --xc-deep: #14323a; --xc-mint: #24dbab; --xc-acc: #1ca684; --xc-ink: #10161d; --xc-text: #22272e; --xc-pad: clamp(44px, 4vw, 60px); }
main#main { font-family: 'Inter', system-ui, sans-serif; color: var(--xc-text); }
.xc-wrap { max-width: 1180px; margin: 0 auto; padding: 0 clamp(20px, 4vw, 48px); }
.xc-h2 { margin: 0 0 clamp(36px, 3.6vw, 52px); text-align: center; font: 400 clamp(32px, 2.9vw, 44px)/1.12 'Zodiak', Georgia, serif; letter-spacing: -0.02em; color: var(--xc-ink); }
main#main p a, .xc-ans a { color: #1f4f55; text-decoration: none; transition: color .2s ease; }
main#main p a:hover, .xc-ans a:hover { color: var(--xc-acc); }

/* 1 HERO + FORM */
.xc-hero { --xc-hd: 96px; --xc-gut: 40px; position: relative; color: #fff; background: radial-gradient(55% 85% at 8% 55%, rgba(26,65,69,.95) 0%, rgba(26,65,69,0) 75%), radial-gradient(75% 70% at 78% 15%, #2d5c5a 0%, #1a4145 42%, rgba(7,15,15,0) 82%), #14323a; }
.xc-hero-in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 520px); align-items: center; gap: clamp(40px, 6vw, 110px); max-width: 1440px; margin: 0 auto; padding: calc(var(--xc-hd) + 40px) var(--xc-gut) 56px; }
.xc-h1 { margin: 0; white-space: nowrap; font: 400 clamp(40px, 4.4vw, 66px)/1 'Zodiak', Georgia, serif; letter-spacing: -0.03em; color: #fff; }
.xc-h1 .xc-acc { color: var(--xc-mint); }
.xc-hero-text { justify-self: start; align-self: start; }
.xc-hero-sub { margin: 26px 0 0; white-space: nowrap; font: 500 clamp(16px, 1.5vw, 22px)/1.5 'Inter', sans-serif; color: #fff; }
.xc-direct { list-style: none; margin: 40px 0 0; padding: 0; display: grid; gap: 22px; }
.xc-direct li { display: grid; gap: 6px; }
.xc-direct-l { font: 600 11.5px/1 'Inter', sans-serif; letter-spacing: .2em; text-transform: uppercase; color: var(--xc-mint); }
.xc-direct a { font: 400 clamp(24px, 2.1vw, 32px)/1.15 'Zodiak', Georgia, serif; letter-spacing: -0.01em; color: #fff; text-decoration: none; transition: color .2s ease; }
.xc-direct a:hover { color: var(--xc-mint); }
.xc-hero-note { margin: 40px 0 0; font: 400 14px/1.6 'Inter', sans-serif; color: rgba(236,244,242,.7); }
.xc-card { padding: clamp(26px, 2.6vw, 36px); background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.14); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); box-shadow: 0 30px 70px -30px rgba(0,0,0,.5); clip-path: polygon(0 0, calc(100% - 24px) 0, 100% 24px, 100% 100%, 0 100%); }
.xc-form { display: grid; gap: 13px; }
.xc-row { display: grid; grid-template-columns: 1fr 1fr; gap: 13px; }
.xc-field { display: grid; gap: 6px; }
.xc-field > span { font: 500 13px/1 'Inter', sans-serif; color: rgba(236,244,242,.78); }
.xc-field input, .xc-field select, .xc-field textarea { width: 100%; box-sizing: border-box; padding: 10px 13px; font: 400 15px/1.4 'Inter', sans-serif; color: #fff; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.2); border-radius: 6px; outline: none; transition: border-color .2s ease, background-color .2s ease; }
.xc-field textarea { resize: vertical; min-height: 86px; }
.xc-field input:focus, .xc-field select:focus, .xc-field textarea:focus { border-color: var(--xc-mint); background: rgba(255,255,255,.1); }
.xc-field select { -webkit-appearance: none; appearance: none; padding-right: 40px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%2324dbab' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; }
.xc-field select option { color: #10161d; }
.xc-field textarea::placeholder { color: rgba(236,244,242,.42); }
.xc-check { display: grid; grid-template-columns: 18px 1fr; gap: 12px; align-items: start; font: 400 12.5px/1.55 'Inter', sans-serif; color: rgba(236,244,242,.72); }
.xc-check input { width: 18px; height: 18px; margin: 1px 0 0; accent-color: var(--xc-mint); }
.xc-captcha:empty { display: none; }
.xc-send { height: 50px; border: 0; border-radius: 6px; background: var(--xc-mint); color: #0b2a2a; font: 600 15.5px/1 'Inter', sans-serif; letter-spacing: .02em; cursor: pointer; transition: background-color .2s ease, transform .2s ease; }
.xc-send:hover { background: #4fe6bf; }
.xc-send:active { transform: translateY(1px); }
.xc-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* 2 WHAT HAPPENS NEXT */
.xc-steps { background: #fff; padding: var(--xc-pad) 0; }
.xc-step-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(28px, 4vw, 56px); }
.xc-step-list li { padding-top: 26px; border-top: 1px solid #e3e8e8; }
.xc-num { display: block; font: 400 clamp(36px, 3vw, 46px)/1 'Zodiak', Georgia, serif; color: var(--xc-acc); }
.xc-step-list h3 { margin: 18px 0 12px; font: 400 clamp(22px, 1.9vw, 27px)/1.2 'Zodiak', Georgia, serif; letter-spacing: -0.01em; color: var(--xc-ink); }
.xc-step-list p { margin: 0; font: 400 18px/1.7 'Spectral', Georgia, serif; color: var(--xc-text); text-align: justify; hyphens: auto; }

/* 3 WHAT CLIENTS WORRY ABOUT */
.xc-worry { background: #fdfdfd; padding: var(--xc-pad) 0; }
.xc-rows { max-width: 1100px; margin: 0 auto; }
.xc-rowq { display: grid; grid-template-columns: 340px 1fr; gap: clamp(28px, 4vw, 64px); padding: 30px 0; border-top: 1px solid #e3e8e8; }
.xc-rowq:last-child { border-bottom: 1px solid #e3e8e8; }
.xc-rowq h3 { margin: 0; font: 400 clamp(22px, 1.9vw, 27px)/1.25 'Zodiak', Georgia, serif; letter-spacing: -0.01em; color: var(--xc-ink); }
.xc-rowq p { margin: 0; font: 400 18.5px/1.75 'Spectral', Georgia, serif; color: var(--xc-text); text-align: justify; hyphens: auto; }

/* 4 OFFICES (same band as the About page) */
.xc-map { position: relative; overflow: hidden; isolation: isolate; color: #f6f5f3; background: #14323a; padding: clamp(52px, 5vw, 72px) 0; }
.xc-map-bg { position: absolute; inset: 0; z-index: -1; pointer-events: none; background: linear-gradient(180deg, rgba(20,50,58,.55) 0%, rgba(20,50,58,.35) 45%, rgba(15,38,44,.85) 100%), url(/images/home-offices-bg.webp) center 40% / cover no-repeat; }
.xc-map-bg::after { content: ''; position: absolute; inset: 0; background: #1a5a55; mix-blend-mode: color; }
.xc-map-h { margin: 0; text-align: center; font: 400 clamp(32px, 2.9vw, 44px)/1.12 'Zodiak', Georgia, serif; letter-spacing: -0.02em; color: #fff; }
.xc-offices { list-style: none; margin: clamp(36px, 3.6vw, 52px) 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.xc-offices a { display: block; height: 100%; padding: 30px 32px 28px; background: rgba(214,224,236,.1); border: 1px solid rgba(255,255,255,.08); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); color: #f4efe6; text-decoration: none; clip-path: polygon(0 0, calc(100% - 22px) 0, 100% 22px, 100% 100%, 0 100%); transition: background-color .3s ease, transform .3s ease; }
.xc-offices a:hover { background: rgba(214,224,236,.18); transform: translateY(-3px); }
.xc-offices b { display: block; margin-bottom: 10px; font: 400 22px/1.2 'Zodiak', Georgia, serif; color: var(--xc-mint); }
.xc-offices span { display: block; font-size: 15px; line-height: 1.6; }
.xc-offices em { display: inline-block; margin-top: 14px; font: normal 500 14px/1 'Inter', sans-serif; color: var(--xc-mint); }

/* 5 FAQ (open / close) */
.xc-faq { background: #fff; padding: var(--xc-pad) 0; }
.xc-acc-list { max-width: 1000px; margin: 0 auto; }
.xc-item { border-top: 1px solid #e3e8e8; }
.xc-item:last-child { border-bottom: 1px solid #e3e8e8; }
.xc-item h3 { margin: 0; }
.xc-item button { display: flex; align-items: center; justify-content: space-between; gap: 24px; width: 100%; padding: 24px 0; border: 0; background: none; text-align: left; cursor: pointer; font: 400 clamp(20px, 1.7vw, 24px)/1.3 'Zodiak', Georgia, serif; letter-spacing: -0.01em; color: var(--xc-ink); transition: color .2s ease; }
.xc-item button:hover { color: var(--xc-acc); }
.xc-item i { position: relative; flex: none; width: 16px; height: 16px; }
.xc-item i::before, .xc-item i::after { content: ''; position: absolute; left: 0; right: 0; top: 7px; height: 2px; background: var(--xc-acc); transition: transform .3s ease; }
.xc-item i::after { transform: rotate(90deg); }
.xc-item button[aria-expanded="true"] i::after { transform: rotate(0deg); }
.xc-ans p { margin: 0; padding: 0 0 26px; max-width: 880px; font: 400 18px/1.75 'Spectral', Georgia, serif; color: var(--xc-text); text-align: justify; hyphens: auto; }

@media (max-width: 960px) {
  .xc-hero-in { grid-template-columns: 1fr; gap: 40px; padding: calc(var(--xc-hd) + 28px) 20px 48px; }
  .xc-step-list, .xc-offices { grid-template-columns: 1fr; }
  .xc-rowq { grid-template-columns: 1fr; gap: 10px; }
}
@media (max-width: 560px) {
  .xc-hero-sub { white-space: normal; }
  .xc-hero-in { padding-left: 16px; padding-right: 16px; }
  .xc-h1 { font-size: 34px; }
  .xc-card { padding: 22px 16px; }
  .xc-row { grid-template-columns: 1fr; }
  .xc-rowq p, .xc-step-list p, .xc-ans p { text-align: left; }
}

/* THANK-YOU page (form success) */
.xc-thanks .xc-hero-in { grid-template-columns: 1fr; min-height: 62vh; }
.xc-thanks-p { margin: 22px 0 0; max-width: 34em; font: 400 18px/1.7 'Spectral', Georgia, serif; color: rgba(236,244,242,.86); }
main#main .xc-hero-note .xc-back { color: var(--xc-mint); text-decoration: none; }
main#main .xc-hero-note .xc-back:hover { color: #fff; }