/* eNotarize — contact page (site layout; form controls come from login.css) */
.ct__band { padding: 1.1rem 0 1.2rem; border-bottom: 1px solid var(--line-2);
  background: radial-gradient(58% 90% at 92% 0%, rgba(94,217,186,.34) 0, transparent 70%), radial-gradient(40% 70% at 0% 100%, rgba(146,189,245,.24) 0, transparent 70%), linear-gradient(150deg, var(--paper-3), #fff 55%); }
.ct__bandrow { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .6rem 2rem; }
.ct__band h1 { width: fit-content; font: 700 clamp(1.7rem, 3vw, 2.3rem)/1.1 var(--font-display); letter-spacing: -.03em;
  background: linear-gradient(100deg, #0D1219 0%, #04535C 40%, #088178 75%, #0E9F8E 100%); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; }
.ct__band p { margin-top: .2rem; color: var(--t-secondary); }
.ct__crumb { display: flex; align-items: center; gap: .5rem; font-size: .78rem; color: var(--t-faint); }
.ct__crumb a { color: var(--t-secondary); text-decoration: none; }
.ct__crumb a:hover { color: var(--brand); }
.ct__crumb i { font-size: .55rem; }

.ct__grid { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: 2rem; padding-block: 2rem 3.5rem; align-items: start; }
.ct__info h2, .ct__card h2 { font: 700 1.35rem var(--font-display); letter-spacing: -.015em; }
.ct__ways { list-style: none; display: grid; gap: .8rem; margin-top: 1rem; }
.ct__ways a { display: flex; align-items: center; gap: 1rem; padding: .9rem 1.1rem; background: #fff; border: 1px solid var(--line); border-radius: 14px; text-decoration: none; color: var(--t); transition: border-color .2s, box-shadow .2s, transform .2s; }
.ct__ways a:hover { border-color: var(--brand); box-shadow: 0 12px 24px -16px rgba(8,129,120,.5); transform: translateY(-2px); }
.ct__ways a:focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; }
.ct__ways span:nth-child(2) { display: flex; flex-direction: column; flex: 1; min-width: 0; line-height: 1.3; }
.ct__ways b { font: 700 .98rem var(--font-display); }
.ct__ways small { font-size: .84rem; color: var(--t-secondary); overflow-wrap: anywhere; }
.ct__go { color: var(--t-disabled); font-size: .8rem; transition: transform .2s, color .2s; }
.ct__ways a:hover .ct__go { transform: translateX(3px); color: var(--brand); }
.ct__ico { display: grid; place-items: center; flex: none; width: 2.8rem; height: 2.8rem; border-radius: 12px; font-size: 1.05rem; }
.ct__ico--a { background: var(--primary-lighter); color: var(--primary-darker); }
.ct__ico--b { background: var(--info-lighter); color: var(--info-dark); }
.ct__ico--c { background: var(--success-lighter); color: var(--success-dark); }
.ct__ico--d { background: var(--warning-lighter); color: var(--warning-dark); }
.ct__office { display: flex; gap: 1rem; margin-top: 1.2rem; padding: 1.1rem; background: var(--paper-2); border: 1px solid var(--line-2); border-radius: 14px; }
.ct__office address { font-style: normal; font-size: .88rem; line-height: 1.6; color: var(--t-secondary); }
.ct__office b { display: block; margin-bottom: .2rem; color: var(--t); font: 700 .98rem var(--font-display); }
.ct__note { display: flex; gap: .7rem; margin-top: 1.2rem; font-size: .84rem; line-height: 1.55; color: var(--t-secondary); }
.ct__note i { color: var(--brand); margin-top: .25rem; }

.ct__card { padding: 1.8rem; background: #fff; border: 1px solid var(--line); border-radius: 20px; box-shadow: var(--sh-md); }
.ct__lead { margin-top: .3rem; color: var(--t-secondary); font-size: .92rem; }
.ct__card .lg__form { margin-top: 1.4rem; }
.ct__two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.1rem 1.2rem; align-items: start; }
.ct__opt { margin-left: .3rem; font-size: .72rem; font-weight: 500; color: var(--t-faint); }
.lg__input--area { height: auto; align-items: flex-start; padding: .7rem .9rem; }
.lg__input textarea { flex: 1; min-width: 0; border: 0; outline: 0; background: none; resize: vertical; min-height: 7rem; font: 500 .95rem/1.5 var(--font-ui); color: var(--t); }
.lg__input textarea::placeholder { color: var(--t-disabled); }
.lg__input select { flex: 1; min-width: 0; height: 100%; border: 0; outline: 0; background: transparent; cursor: pointer; font: 500 .95rem/1 var(--font-ui); color: var(--t); appearance: none; -webkit-appearance: none; padding-right: 1.6rem;
  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 1l5 5 5-5' fill='none' stroke='%23637381' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right .3rem center; }
.lg__input select:invalid { color: var(--t-disabled); }
.ct__count { text-align: right; font-size: .72rem; color: var(--t-faint); }
.ct__done { display: grid; justify-items: start; gap: 1rem; }
.ct__done[hidden] { display: none; }
.ct__done h2:focus { outline: 0; }
.ct__donei { display: grid; place-items: center; width: 3rem; height: 3rem; border-radius: 12px; background: var(--success-lighter); color: var(--success-dark); font-size: 1.3rem; }
.ct__done b { overflow-wrap: anywhere; }
@media (max-width: 900px) { .ct__grid { grid-template-columns: minmax(0, 1fr); padding-block: 1.4rem 2.5rem; } }
@media (max-width: 560px) { .ct__two { grid-template-columns: minmax(0, 1fr); } .ct__card { padding: 1.2rem; } }
@media (prefers-reduced-motion: reduce) { .ct__ways a, .ct__go { transition: none; } .ct__ways a:hover { transform: none; } }
