/* PAC.CO Contact page — layout follows ref 3 (contact part only).
 * All selectors are scoped under .contact-page so nothing leaks into the
 * store header/footer. lhs form card + rhs info stack; single column ≤1024px,
 * compact ≤560px. Wrap matches the store 1400px content width.
 * Version: 1.0.2
 */
.contact-page .ct-wrap{max-width:1400px;margin:0 auto;padding:40px 24px 0}
.contact-page .ct-eyebrow{font-size:13px;font-weight:800;letter-spacing:.22em;color:#62676f;margin:0 0 8px}
.contact-page .ct-display{margin:0;font-weight:900;text-transform:uppercase;line-height:1;letter-spacing:-.01em;font-size:clamp(40px,6vw,76px);color:#111}
.contact-page .ct-lede{color:#62676f;font-size:clamp(16px,2vw,19px);margin:10px 0 0;max-width:52ch}
.contact-page .ct-crumbs{margin:26px 0 0;font-size:13px;font-weight:700;letter-spacing:.08em;color:#62676f}
.contact-page .ct-crumbs a{color:inherit;text-decoration:none}
.contact-page .ct-crumbs a:hover{text-decoration:underline}
.contact-page .ct-grid{display:grid;grid-template-columns:1.55fr .95fr;gap:24px;margin-top:28px;align-items:stretch}
.contact-page .ct-card{background:#fff;border:1px solid #e2e4eb;border-radius:16px;padding:24px}
.contact-page .ct-card h2{margin:0;font-size:20px;font-weight:800;letter-spacing:-.01em;color:#111}
.contact-page .ct-card p.ct-sub{margin:6px 0 0;color:#3c4048;font-size:14px}
.contact-page .ct-form{flex:1;display:flex;flex-direction:column;min-height:0}
.contact-page #ct-contact-form{flex:1;display:flex;flex-direction:column;min-height:0}
.contact-page .ct-row{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:18px}
.contact-page .ct-field{background:#f2f3f8;border:2px solid transparent;border-radius:12px;padding:12px 16px 10px;box-shadow:0 0 0 1px #e2e4eb}
.contact-page .ct-field:focus-within{box-shadow:0 0 0 2px #111}
.contact-page .ct-field label{display:block;font-size:12px;font-weight:800;letter-spacing:.14em;color:#4b5058;margin-bottom:6px}
.contact-page .ct-field label .ct-opt{font-weight:600;letter-spacing:.02em;color:#62676f}
.contact-page .ct-field input,.contact-page .ct-field textarea{width:100%;border:0;background:transparent;font:inherit;font-size:16px;color:#111;padding:4px 0 6px;outline:none;resize:vertical}
.contact-page .ct-field input::placeholder,.contact-page .ct-field textarea::placeholder{color:#a6acb6}
.contact-page .ct-field .ct-hint{font-size:12px;color:#62676f}
.contact-page .ct-field.ct-invalid{box-shadow:0 0 0 2px #d92d20;background:#fff7f6}
.contact-page .ct-err{display:none;font-size:13px;font-weight:600;color:#b42318;margin-top:4px}
.contact-page .ct-field.ct-invalid .ct-err{display:block}
.contact-page .ct-full{grid-column:1/-1}
.contact-page #ctMsg{flex:1;min-height:180px}
.contact-page .ct-foot{display:flex;align-items:center;gap:20px;flex-wrap:wrap;margin-top:auto;padding-top:22px}
.contact-page .ct-send{font-size:14px;letter-spacing:.1em;padding:15px 30px;min-height:52px;flex:none}
.contact-page .ct-send[disabled]{opacity:.65;cursor:wait}
.contact-page .ct-micro{flex:1;min-width:200px;font-size:13px;line-height:1.55;color:#3c4048;margin:0}
.contact-page .ct-status{margin-top:16px;border-radius:12px;padding:14px 16px;font-size:14px;font-weight:600;display:none}
.contact-page .ct-status.ct-ok{display:block;background:#0b0b0c;color:#fff}
.contact-page .ct-status.ct-bad{display:block;background:#fdecea;color:#7a271a;border:1px solid #f5c6c0}
.contact-page .ct-success{display:none;background:#0b0b0c;color:#fff;border-radius:12px;padding:40px 28px;margin-top:18px;text-align:center}
.contact-page .ct-success.ct-show{display:block}
.contact-page .ct-success h3{margin:0 0 8px;font-size:26px;font-weight:800;letter-spacing:-.01em}
.contact-page .ct-success p{color:#d7d9e0;margin:0 auto 16px;max-width:42ch}
.contact-page #ct-contact-form.ct-sent .ct-row,.contact-page #ct-contact-form.ct-sent .ct-foot{display:none}
.contact-page .ct-aside{display:flex;flex-direction:column;gap:20px;height:100%;min-height:0}
.contact-page .ct-dark{background:#0b0b0c;color:#fff;border-radius:16px;padding:28px}
.contact-page .ct-dark h2{margin:0;font-size:20px;font-weight:800;letter-spacing:-.01em;color:#fff}
.contact-page .ct-rows{margin-top:20px;display:grid;gap:0}
.contact-page .ct-drow{display:flex;gap:14px;align-items:flex-start;border-top:1px solid #26262b;padding:16px 0}
.contact-page .ct-drow:first-child{border-top:0;padding-top:0}
.contact-page .ct-drow:last-child{padding-bottom:0}
.contact-page .ct-dic{flex:none;width:44px;height:44px;border:1.5px solid #3a3a41;border-radius:50%;display:grid;place-items:center}
.contact-page .ct-dic svg{width:20px;height:20px;color:#fff}
.contact-page .ct-dtx{display:grid;gap:2px;min-width:0}
.contact-page .ct-drow .ct-k{font-size:11px;font-weight:800;letter-spacing:.18em;color:#a7abb4;display:block}
.contact-page .ct-drow .ct-v{font-size:16px;font-weight:700;display:block}
.contact-page .ct-drow .ct-v a{color:#fff;text-decoration:none;border-bottom:2px solid #ffc801;overflow-wrap:anywhere}
.contact-page .ct-drow .ct-s{font-size:13px;color:#c4c7ce;display:block}
.contact-page .ct-help{background:#fff;border:1px solid #e2e4eb;border-radius:16px;padding:12px 12px 6px;flex:1}
.contact-page .ct-help h2{padding:12px 12px 6px}
.contact-page .ct-qa{border-top:1px solid #e2e4eb;padding:14px 12px;display:flex;align-items:center;gap:14px;min-height:64px}
.contact-page .ct-qa:first-of-type{border-top:0}
.contact-page .ct-qaic{flex:none;width:40px;height:40px;display:grid;place-items:center}
.contact-page .ct-qaic svg{width:26px;height:26px;color:#111}
.contact-page .ct-qatx{flex:1;min-width:0;display:grid;gap:2px}
.contact-page .ct-qt{font-weight:800;font-size:15px;display:block;color:#111}
.contact-page .ct-qs{font-size:13px;color:#62676f;display:block}
.contact-page .ct-go{flex:none;color:#9ba0aa;font-size:22px;line-height:1}
@media (max-width:1024px){
  .contact-page .ct-grid{grid-template-columns:1fr}
}
@media (max-width:560px){
  .contact-page .ct-wrap{padding:24px 16px 0}
  .contact-page .ct-grid{margin-top:20px}
  .contact-page .ct-card,.contact-page .ct-dark{padding:16px}
  .contact-page .ct-card h2{font-size:18px}
  .contact-page .ct-row{grid-template-columns:1fr;gap:12px;margin-top:12px}
  .contact-page .ct-field{padding:10px 14px 8px}
  .contact-page .ct-field label{margin-bottom:4px}
  .contact-page #ctMsg{min-height:120px}
  .contact-page .ct-foot{padding-top:16px}
  .contact-page .ct-send{width:100%}
}
@media (prefers-reduced-motion:reduce){
  .contact-page *{transition:none !important;animation:none !important}
}

/* ── Entrance motion (first open): title masks up, lede + crumbs follow, cards rise in, rows stagger.
 * Starts when pacco-motion marks the page entered (after the page-transition cover opens). */
@keyframes ctRise{from{opacity:0;transform:translate3d(0,34px,0)}to{opacity:1;transform:none}}
@keyframes ctRiseS{from{opacity:0;transform:translate3d(0,18px,0)}to{opacity:1;transform:none}}
@keyframes ctMask{from{opacity:1;clip-path:inset(0 0 100% 0);transform:translate3d(0,42%,0)}to{opacity:1;clip-path:inset(-8% 0 -8% 0);transform:none}}
@keyframes ctPop{from{opacity:0;transform:translate3d(0,22px,0) scale(.97)}to{opacity:1;transform:none}}
@keyframes ctSafe{to{opacity:1;clip-path:none;transform:none}}
html.pmx-js:not(.pmx-entered) .contact-page :is(.ct-eyebrow,.ct-display,.ct-lede,.ct-crumbs,.ct-card,.ct-dark,.ct-help,.ct-card>h2,.ct-card>.ct-sub,.ct-field,.ct-foot,.ct-drow,.ct-qa){opacity:0;animation:ctSafe .01s 3.4s forwards}
html.pmx-js.pmx-entered .contact-page :is(.ct-eyebrow,.ct-lede,.ct-crumbs){animation:ctRiseS .9s cubic-bezier(.16,1,.3,1) both}
html.pmx-js.pmx-entered .contact-page .ct-eyebrow{animation-delay:0ms}
html.pmx-js.pmx-entered .contact-page .ct-display{animation:ctMask 1.1s cubic-bezier(.16,1,.3,1) 90ms both}
html.pmx-js.pmx-entered .contact-page .ct-lede{animation-delay:230ms}
html.pmx-js.pmx-entered .contact-page .ct-crumbs{animation-delay:310ms}
html.pmx-js.pmx-entered .contact-page :is(.ct-card,.ct-dark,.ct-help){animation:ctRise 1.05s cubic-bezier(.16,1,.3,1) both}
html.pmx-js.pmx-entered .contact-page .ct-card{animation-delay:360ms}
html.pmx-js.pmx-entered .contact-page .ct-dark{animation-delay:460ms}
html.pmx-js.pmx-entered .contact-page .ct-help{animation-delay:580ms}
html.pmx-js.pmx-entered .contact-page :is(.ct-card>h2,.ct-card>.ct-sub,.ct-field,.ct-foot,.ct-drow,.ct-qa){animation:ctRiseS .8s cubic-bezier(.16,1,.3,1) both}
html.pmx-js.pmx-entered .contact-page .ct-card>h2{animation-delay:560ms}
html.pmx-js.pmx-entered .contact-page .ct-card>.ct-sub{animation-delay:620ms}
html.pmx-js.pmx-entered .contact-page .ct-field[data-ct-field="name"]{animation-delay:700ms}
html.pmx-js.pmx-entered .contact-page .ct-field[data-ct-field="email"]{animation-delay:770ms}
html.pmx-js.pmx-entered .contact-page .ct-field[data-ct-field="order"]{animation-delay:840ms}
html.pmx-js.pmx-entered .contact-page .ct-field[data-ct-field="subject"]{animation-delay:910ms}
html.pmx-js.pmx-entered .contact-page .ct-field[data-ct-field="message"]{animation-delay:980ms}
html.pmx-js.pmx-entered .contact-page .ct-foot{animation-delay:1060ms}
html.pmx-js.pmx-entered .contact-page .ct-drow:nth-child(1){animation-delay:640ms}
html.pmx-js.pmx-entered .contact-page .ct-drow:nth-child(2){animation-delay:720ms}
html.pmx-js.pmx-entered .contact-page .ct-drow:nth-child(3){animation-delay:800ms}
html.pmx-js.pmx-entered .contact-page .ct-qa:nth-of-type(1){animation-delay:760ms}
html.pmx-js.pmx-entered .contact-page .ct-qa:nth-of-type(2){animation-delay:840ms}
html.pmx-js.pmx-entered .contact-page .ct-qa:nth-of-type(3){animation-delay:920ms}
html.pmx-js.pmx-entered .contact-page .ct-qa:nth-of-type(n+4){animation-delay:980ms}
@media (prefers-reduced-motion:reduce){
  html.pmx-js .contact-page :is(.ct-eyebrow,.ct-display,.ct-lede,.ct-crumbs,.ct-card,.ct-dark,.ct-help,.ct-card>h2,.ct-card>.ct-sub,.ct-field,.ct-foot,.ct-drow,.ct-qa){opacity:1 !important;clip-path:none !important;transform:none !important;animation:none !important}
}