.page-contact{ position: relative; background: var(--color-primary); color: var(--color-text); }
.page-contact img{ max-width: 100%; height: auto; }
.page-contact .breadcrumb{ padding-top: 1.25rem; font-size: .875rem; color: var(--color-text-dim); }
.page-contact .breadcrumb a{ color: var(--color-text-dim); text-decoration: none; transition: color var(--duration) var(--easing); }
.page-contact .breadcrumb a:hover{ color: var(--color-accent); }
.page-contact .breadcrumb-sep{ margin: 0 .35rem; color: var(--color-border); }
.page-contact .contact-hero{ position: relative; padding: 2.5rem 0 1.5rem; text-align: center; }
.page-contact .contact-hero::before{ content: ""; display: block; width: 4.5rem; height: .35rem; margin: 0 auto 1.5rem; background: linear-gradient(90deg, var(--color-accent) 0 45%, var(--color-neon-blue) 45% 65%, var(--color-neon-purple) 65%); }
.page-contact .contact-hero .section-label{ justify-content: center; }
.page-contact .contact-hero h1{ margin: .75rem 0 0; font-family: var(--font-heading); font-weight: var(--font-heading-weight); font-size: clamp(1.9rem, 4.6vw, 3.4rem); line-height: 1.25; letter-spacing: .01em; }
.page-contact .contact-hero-lead{ max-width: 640px; margin: 1.1rem auto 0; color: var(--color-text-dim); font-size: 1rem; line-height: 1.85; }
.page-contact .channels{ padding-top: 1rem; padding-bottom: 3.5rem; }
.page-contact .channel-wrap{ display: grid; grid-template-columns: 1fr; gap: 2rem; }
.page-contact .channel-aside h2{ margin: .75rem 0 1rem; font-family: var(--font-heading); font-weight: var(--font-heading-weight); font-size: clamp(1.5rem, 3vw, 2.25rem); }
.page-contact .channel-aside .text-note{ margin-top: 1rem; color: var(--color-text-dim); font-size: .95rem; line-height: 1.8; }
.page-contact .image-frame{ margin-top: 1.75rem; border: 1px solid var(--color-border); background: linear-gradient(160deg, rgba(155,89,182,.18), rgba(0,210,255,.08)); }
.page-contact .image-frame img{ display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.page-contact .contact-list{ display: grid; gap: 1rem; }
.page-contact .contact-row{ position: relative; display: grid; grid-template-columns: 3rem 1fr; gap: 1rem; padding: 1.35rem 1.25rem; overflow: hidden; border: 1px solid var(--color-border); background: linear-gradient(135deg, rgba(0,210,255,.05), rgba(155,89,182,.03)), var(--color-primary-alt); }
.page-contact .contact-row::after{ content: ""; position: absolute; right: 0; top: 0; bottom: 0; width: .3rem; background: linear-gradient(180deg, var(--color-neon-blue), var(--color-neon-purple) 60%, var(--color-accent)); }
.page-contact .contact-index{ font-family: var(--font-heading); font-weight: var(--font-heading-weight); font-size: 1.4rem; color: var(--color-accent); line-height: 1.2; }
.page-contact .contact-body{ min-width: 0; }
.page-contact .contact-type{ margin: 0; font-size: .75rem; font-weight: 700; letter-spacing: .18em; color: var(--color-text-dim); text-transform: uppercase; }
.page-contact .contact-value{ display: inline-block; margin-top: .3rem; font-family: var(--font-heading); font-weight: var(--font-heading-weight); font-size: clamp(1.05rem, 2.7vw, 1.6rem); color: var(--color-text); text-decoration: none; overflow-wrap: anywhere; }
.page-contact a.contact-value:hover{ color: var(--color-accent); }
.page-contact .contact-desc{ margin: .65rem 0 0; color: var(--color-text-dim); font-size: .9rem; line-height: 1.7; }
.page-contact .copy-btn{ margin-top: 1rem; }
.page-contact .email-mark{ display: none; }
.page-contact .address-map{ position: relative; margin-top: 1rem; height: 6.5rem; overflow: hidden; display: flex; align-items: center; justify-content: center; border: 1px solid var(--color-border); background: linear-gradient(rgba(0,210,255,.09) 1px, transparent 1px), linear-gradient(90deg, rgba(0,210,255,.09) 1px, transparent 1px), linear-gradient(135deg, rgba(155,89,182,.18), transparent); background-size: 18px 18px, 18px 18px, auto; }
.page-contact .address-map::before{ content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 45%, rgba(245,166,35,.25) 50%, transparent 55%); animation: pageContactScan 4s linear infinite; }
.page-contact .map-pin{ position: relative; z-index: 1; font-family: var(--font-heading); font-weight: var(--font-heading-weight); padding: .45rem .9rem; font-size: .85rem; color: var(--color-accent); border: 1px solid var(--color-accent); background: var(--color-primary); }
@keyframes pageContactScan{ from{ transform: translateX(-100%); } to{ transform: translateX(100%); } }
.page-contact .hours{ padding-top: 2.5rem; padding-bottom: 4rem; border-top: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border); background: radial-gradient(circle at 90% 10%, rgba(155,89,182,.15), transparent 26%), radial-gradient(circle at 5% 80%, rgba(0,210,255,.1), transparent 24%), var(--color-primary); }
.page-contact .hours-head .section-label{ margin-bottom: .5rem; }
.page-contact .hours-head h2{ margin: 0; font-family: var(--font-heading); font-weight: var(--font-heading-weight); font-size: clamp(1.5rem, 3vw, 2.25rem); }
.page-contact .hours-grid{ display: grid; gap: 1rem; margin-top: 2rem; }
.page-contact .hours-card{ position: relative; padding: 1.75rem 1.5rem; border: 1px solid var(--color-border); background: linear-gradient(160deg, var(--color-primary-alt), var(--color-primary)); }
.page-contact .hours-card .metric-value{ display: block; font-family: var(--font-heading); font-weight: var(--font-heading-weight); font-size: clamp(1.6rem, 3.8vw, 2.2rem); color: var(--color-accent); }
.page-contact .hours-card .metric-label{ display: block; margin-top: .4rem; font-weight: 700; color: var(--color-text); }
.page-contact .hours-card p{ margin: .6rem 0 0; color: var(--color-text-dim); font-size: .9rem; line-height: 1.7; }
.page-contact .time-track{ display: grid; grid-template-columns: 3.5rem 1fr 3.5rem; gap: .75rem; align-items: center; margin-top: 2.25rem; }
.page-contact .time-track-label{ font-size: .8rem; color: var(--color-text-dim); }
.page-contact .time-track-label.t-end{ text-align: right; }
.page-contact .time-track-bar{ position: relative; display: block; height: .5rem; background: var(--color-border); }
.page-contact .time-track-fill{ position: absolute; left: 33.33%; top: 0; bottom: 0; width: 66.67%; background: linear-gradient(90deg, var(--color-accent) 0%, var(--color-neon-purple) 55%, var(--color-neon-blue) 100%); }
.page-contact .feedback{ color: var(--color-primary); }
.page-contact .feedback .section-label{ color: var(--color-neon-purple); }
.page-contact .feedback h2{ margin: .5rem 0 1rem; font-family: var(--font-heading); font-weight: var(--font-heading-weight); font-size: clamp(1.5rem, 3vw, 2.2rem); color: var(--color-primary); }
.page-contact .feedback p{ color: var(--color-primary); font-size: .95rem; line-height: 1.8; }
.page-contact .feedback-grid{ display: grid; gap: 2rem; }
.page-contact .feedback-copy .btn{ margin-top: .5rem; }
.page-contact .demo-form{ padding: 1.5rem; border: 1px solid #d8d6c8; background: #fff; }
.page-contact .feedback-field{ margin-bottom: 1rem; }
.page-contact .feedback-field label{ display: block; margin-bottom: .4rem; font-size: .875rem; font-weight: 700; color: var(--color-primary); }
.page-contact .feedback-field select,
.page-contact .feedback-field textarea{ width: 100%; padding: .7rem .85rem; border: 1px solid #c8c6b8; border-radius: 0; background: #fff; font-family: var(--font-body); color: var(--color-primary); transition: border-color var(--duration) var(--easing), box-shadow var(--duration) var(--easing); }
.page-contact .feedback-field select:focus,
.page-contact .feedback-field textarea:focus{ outline: none; border-color: var(--color-neon-purple); box-shadow: 0 0 0 2px rgba(155,89,182,.2); }
.page-contact .feedback-thanks{ margin-top: 1rem; padding: .9rem 1rem; border-left: 3px solid var(--color-accent); background: rgba(245,166,35,.12); color: var(--color-primary); font-weight: 600; }
.page-contact .feedback-thanks a{ color: var(--color-primary); text-decoration-thickness: 1px; }
.page-contact .help-tip{ padding-bottom: 4rem; }
.page-contact .help-tip-box{ max-width: 720px; margin: 0 auto; padding: 4rem 1rem 2rem; text-align: center; }
.page-contact .help-tip h2{ margin: .5rem 0 1rem; font-family: var(--font-heading); font-weight: var(--font-heading-weight); font-size: clamp(1.5rem, 3vw, 2.2rem); }
.page-contact .help-tip p{ color: var(--color-text-dim); line-height: 1.85; }
.page-contact .help-tip .tag-list{ justify-content: center; margin-top: 1.5rem; }
.page-contact .help-tip-note{ margin-top: 1.25rem; font-size: .9rem; }
.page-contact .help-tip-note a{ color: var(--color-accent); text-decoration: none; border-bottom: 1px solid rgba(245,166,35,.4); }
.page-contact .scale{ max-width: 1200px; margin: 0 auto; height: .4rem; opacity: .7; background: repeating-linear-gradient(90deg, var(--color-neon-blue) 0 8px, transparent 8px 18px, var(--color-neon-purple) 18px 24px, transparent 24px 34px); }
@media (min-width: 760px){
  .page-contact .hours-grid{ grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 960px){
  .page-contact .channel-wrap{ grid-template-columns: minmax(0,.85fr) minmax(0,1.35fr); gap: clamp(2rem, 6vw, 5rem); align-items: start; }
  .page-contact .feedback-grid{ grid-template-columns: minmax(0,.8fr) minmax(0,1.1fr); gap: clamp(2rem, 6vw, 4rem); align-items: start; }
  .page-contact .email-mark{ display: block; position: absolute; right: -1.5rem; bottom: -1.5rem; width: 9.5rem; height: 9.5rem; object-fit: cover; transform: rotate(-2deg); border: 1px solid var(--color-border); opacity: .45; pointer-events: none; }
}
@media (prefers-reduced-motion: reduce){
  .page-contact .address-map::before{ animation: none; }
}