/* Contact-page layout. Kept separate from the shared site stylesheet. */
.contact-index-page { --contact-accent:#0870bc; --contact-accent-deep:#075da7; --contact-panel-accent:#0870bc; --contact-panel-accent-deep:#075da7; --contact-ink:#0d1a35; --contact-muted:#647895; --contact-line:#dfe7f1; --contact-surface:#f6f8fb; --contact-panel:#152037; --contact-radius:6px; --contact-shadow:0 6px 18px rgba(16,36,68,.06); }
.contact-index-page .company-detail-hero { display:grid; align-items:center; min-height:420px; padding:52px 0 76px; color:#fff; background:url('../img/about_us01.webp') center 42% / cover no-repeat; }
.contact-index-page .company-detail-hero h1 { margin:18px 0 16px; color:#fff; font-size:clamp(38px,4vw,52px); line-height:1.08; }
.contact-index-page .company-detail-hero p { max-width:1180px; color:rgba(255,255,255,.9); font-size:17px; line-height:1.75; }
.contact-index-page .company-eyebrow { display:inline-flex; align-items:center; gap:10px; color:#fff; font-size:14px; font-weight:700; line-height:1.2; text-transform:uppercase; }
.contact-index-page .company-eyebrow::before { width:26px; height:2px; background:currentColor; content:''; }
.contact-index-page .company-section { padding:62px 0; }
.contact-index-page .contact-page-grid { display:grid; grid-template-columns:minmax(0,1fr) minmax(300px,370px); align-items:start; gap:30px; }
.contact-index-page .contact-card-group { display:grid; gap:20px; }
.contact-index-page .contact-main-card,.contact-index-page .contact-map-card { padding:30px; border:1px solid var(--contact-line); border-radius:var(--contact-radius); background:#fff; box-shadow:var(--contact-shadow); }
.contact-index-page .contact-main-card h2,.contact-index-page .contact-action-panel h2 { margin:0 0 22px; color:var(--contact-ink); font-size:25px; line-height:1.3; }
.contact-index-page .contact-info-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }
.contact-index-page .contact-info-item { display:flex; align-items:center; gap:15px; min-height:90px; padding:14px; border:1px solid var(--contact-line); border-radius:var(--contact-radius); background:var(--contact-surface); }
.contact-index-page .contact-icon { display:inline-flex; flex:0 0 42px; align-items:center; justify-content:center; width:42px; height:42px; border-radius:5px; color:#fff; background:var(--contact-accent); font-size:21px; }
.contact-index-page .contact-icon .fa { display:none; }
.contact-index-page .contact-info-item:nth-child(1) .contact-icon::before { width:23px; height:23px; background:center/contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='9' fill='none' stroke='%23fff' stroke-width='2'/%3E%3Cpath d='M8.1 7.6c.3-.3.7-.3 1 0l1.4 1.5c.2.2.3.6.1.9l-.7 1.1c.8 1.4 1.9 2.5 3.3 3.3l1.1-.7c.3-.2.6-.1.9.1l1.5 1.4c.3.3.3.7 0 1-.5.5-1.2.8-1.9.7-4.1-.7-7.3-3.9-8-8-.1-.7.2-1.4.7-1.9Z' fill='%23fff'/%3E%3C/svg%3E"); content:''; }
.contact-index-page .contact-info-item:nth-child(2) .contact-icon::before { width:24px; height:24px; background:center/contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='3' y='5' width='18' height='14' rx='1.5' fill='none' stroke='%23fff' stroke-width='2'/%3E%3Cpath d='m4 7 8 6 8-6' fill='none' stroke='%23fff' stroke-width='2'/%3E%3C/svg%3E"); content:''; }
.contact-index-page .contact-details h3 { margin:0 0 3px; color:var(--contact-ink); font-size:16px; line-height:1.35; }
.contact-index-page .contact-details p { margin:0; color:var(--contact-muted); font-size:13px; line-height:1.55; overflow-wrap:anywhere; }
.contact-index-page .contact-location-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px; }
.contact-index-page .contact-location-grid > div,.contact-index-page .company-process-grid > article,.contact-index-page .company-process-grid > div { height:100%; padding:23px; border:1px solid var(--contact-line); border-radius:var(--contact-radius); background:#fff; box-shadow:0 2px 7px rgba(16,36,68,.025); transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease; }
.contact-index-page .contact-location-grid h3,.contact-index-page .company-process-grid h3 { margin:0 0 10px; color:var(--contact-ink); font-size:18px; line-height:1.35; }
.contact-index-page .contact-location-grid p,.contact-index-page .company-process-grid p { margin:0; color:var(--contact-muted); font-size:14px; line-height:1.7; }
.contact-index-page .contact-location-grid > div:hover,.contact-index-page .company-process-grid > article:hover,.contact-index-page .company-process-grid > div:hover { border-color:#84bce2; box-shadow:var(--contact-shadow); transform:translateY(-2px); }
.contact-index-page .contact-action-panel { position:sticky; top:20px; overflow:hidden; padding:25px 23px 23px; border-radius:var(--contact-radius); color:#fff; background:var(--contact-panel); box-shadow:0 12px 26px rgba(11,25,52,.15); }
.contact-index-page .contact-action-panel::after { position:absolute; right:-35px; bottom:-82px; width:145px; height:260px; border:1px solid rgba(255,255,255,.16); content:''; transform:rotate(12deg); pointer-events:none; }
.contact-index-page .contact-action-panel h2 { position:relative; z-index:1; padding-bottom:16px; border-bottom:1px solid rgba(255,255,255,.14); color:#fff; font-size:20px; }
.contact-index-page .contact-action-panel h2::after { position:absolute; bottom:-1px; left:0; width:45px; height:3px; background:var(--contact-panel-accent); content:''; }
.contact-index-page .contact-action-list { position:relative; z-index:1; display:grid; gap:11px; margin:0 0 22px; }
.contact-index-page .contact-action-list span { display:flex; align-items:center; gap:11px; min-height:49px; padding:10px 11px; border:1px solid rgba(255,255,255,.12); border-radius:4px; color:#fff; background:rgba(255,255,255,.065); font-size:13px; font-weight:600; line-height:1.45; }
.contact-index-page .contact-action-list .fa { display:inline-flex; flex:0 0 20px; align-items:center; justify-content:center; width:20px; height:20px; border-radius:50%; color:#fff; background:var(--contact-panel-accent); font-size:0; }
.contact-index-page .contact-action-list .fa::after { width:10px; height:10px; background:center/contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='m2 6.2 2.3 2.3L10 3' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); content:''; }
.contact-index-page .contact-action-panel .btn { position:relative; z-index:1; display:flex; align-items:center; justify-content:center; width:100%; min-height:49px; padding:12px 16px; border:1px solid var(--contact-panel-accent); border-radius:6px; color:#fff; background:var(--contact-panel-accent); font-size:16px; font-weight:700; line-height:1.2; text-decoration:none; }
.contact-index-page .contact-action-panel .btn:hover,.contact-index-page .contact-action-panel .btn:focus-visible { border-color:var(--contact-panel-accent-deep); color:#fff; background:var(--contact-panel-accent-deep); }
.contact-index-page .section-header { text-align:center; margin-bottom:32px; }
.contact-index-page .section-header h2 { position:relative; margin:0 0 18px; color:var(--contact-ink); font-size:clamp(28px,3vw,34px); line-height:1.2; }
.contact-index-page .section-header h2::after { position:absolute; bottom:-10px; left:50%; width:58px; height:3px; background:var(--contact-accent); content:''; transform:translateX(-50%); }
.contact-index-page .section-header p { max-width:720px; margin:0 auto; color:var(--contact-muted); font-size:14px; line-height:1.65; }
.contact-index-page .contact-map-section { padding-top:55px; }
.contact-index-page .contact-map-card { display:grid; grid-template-columns:300px minmax(0,1fr); gap:30px; align-items:stretch; }
.contact-index-page .contact-map-info { padding:14px 2px; }
.contact-index-page .contact-map-info h3 { margin:16px 0 18px; color:var(--contact-ink); font-size:24px; line-height:1.22; }
.contact-index-page .contact-map-info p { margin:0; color:var(--contact-muted); font-size:14px; line-height:1.85; }
.contact-index-page .contact-google-map-slot { min-height:350px; overflow:hidden; border:1px dashed var(--contact-line); border-radius:4px; background:var(--contact-surface); }
.contact-index-page .contact-google-map-slot iframe { display:block; width:100%; min-height:350px; height:100%; border:0; }
.contact-index-page .company-section-light { padding-top:66px; padding-bottom:70px; background:var(--contact-surface); }
.contact-index-page .company-process-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:20px; margin:0; }
.contact-index-page .company-process-grid span { display:inline-flex; align-items:center; justify-content:center; width:40px; height:40px; margin-bottom:15px; border-radius:5px; color:#fff; background:var(--contact-accent); font-weight:700; }
.contact-index-page .contact-page-form { margin-top:0; }
@media (max-width:1200px) { .contact-index-page .company-process-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:960px) { .contact-index-page .contact-page-grid,.contact-index-page .contact-map-card { grid-template-columns:1fr; } .contact-index-page .contact-action-panel { position:static; } .contact-index-page .contact-map-info { padding:0; } }
@media (max-width:768px) { .contact-index-page .company-detail-hero { padding:42px 0 52px; } .contact-index-page .company-detail-hero p { font-size:15px; } .contact-index-page .company-section { padding:42px 0; } .contact-index-page .contact-main-card,.contact-index-page .contact-map-card { padding:22px; } .contact-index-page .contact-info-grid,.contact-index-page .contact-location-grid,.contact-index-page .company-process-grid { grid-template-columns:1fr; } .contact-index-page .contact-google-map-slot,.contact-index-page .contact-google-map-slot iframe { min-height:280px; } }
@media (max-width:576px) { .contact-index-page .company-detail-hero h1 { font-size:36px; } .contact-index-page .contact-main-card,.contact-index-page .contact-map-card,.contact-index-page .contact-action-panel { padding:19px; } .contact-index-page .contact-info-item { align-items:flex-start; } }