/* =====================================================================
   BOWEN packaging — CONTACT page (SELF-CONTAINED)
   Includes its own base (tokens, primitives, buttons, motion) — does NOT
   depend on packaging-core.css.
   Load only on the Contact page.
   ===================================================================== */

/* ---------- base ---------- */
:root{
  --pk-film:#E9EDEF;
  --pk-film-2:#F3F6F7;
  --pk-white:#FFFFFF;
  --pk-ink:#13202A;
  --pk-ink-soft:#2B3942;
  --pk-steel:#64737D;
  --pk-line:#CFD8DD;
  --pk-line-strong:#AEBBC2;
  --pk-polymer:#0E7C78;
  --pk-polymer-deep:#0A5A57;
  --pk-signal:#BF4730;
  --pk-maxw:1290px;
  --pk-gutter:20px;
}

/* primitives */
.pk-section{color:var(--pk-ink);line-height:1.6;-webkit-font-smoothing:antialiased}
.pk-section *{box-sizing:border-box}
:where(.pk-section) a{color:inherit;text-decoration:none}
.pk-section img{max-width:100%;display:block}
.pk-wrap{max-width:calc(var(--pk-maxw) + (var(--pk-gutter) * 2));margin:0 auto;padding:0 var(--pk-gutter)}
.pk-eyebrow{font-family:monospace;font-size:.72rem;letter-spacing:.22em;text-transform:uppercase;color:var(--pk-polymer);font-weight:500;display:inline-flex;align-items:center;gap:.6em}
.pk-eyebrow::before{content:"";width:22px;height:1px;background:var(--pk-polymer);display:inline-block}
.pk-section-title{font-weight:700;font-size:clamp(1.9rem,3.6vw,3rem);line-height:1.05;letter-spacing:-.02em;color:var(--pk-ink)}
.pk-eyebrow + .pk-section-title,.pk-eyebrow + h1,.pk-eyebrow + h3{margin-top:14px}

/* buttons */
.pk-btn{display:inline-flex;align-items:center;gap:.6em;font-weight:600;font-size:.95rem;padding:.85em 1.5em;border:1px solid transparent;cursor:pointer;transition:.22s ease;letter-spacing:.01em}
.pk-btn-primary{background:var(--pk-polymer);color:#fff;border-color:var(--pk-polymer)}
.pk-btn-primary:hover{background:var(--pk-polymer-deep);border-color:var(--pk-polymer-deep)}
.pk-btn-ghost{background:transparent;color:var(--pk-ink);border-color:var(--pk-line-strong)}
.pk-btn-ghost:hover{border-color:var(--pk-ink);background:var(--pk-ink);color:#fff}
.pk-btn-light{background:#fff;color:var(--pk-polymer-deep);border-color:#fff}
.pk-btn-light:hover{background:var(--pk-ink);color:#fff;border-color:var(--pk-ink)}
.pk-arr{transition:transform .22s ease}
.pk-btn:hover .pk-arr{transform:translateX(3px)}

/* section frame + cta grid bg (used by pagehead) */
.pk-block{padding:clamp(64px,8vw,108px) 0}
.pk-sec-head{display:flex;justify-content:space-between;align-items:flex-end;gap:30px;margin-bottom:46px}
.pk-cta-grid-bg{position:absolute;inset:0;opacity:.16;background-image:linear-gradient(rgba(255,255,255,.6) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.6) 1px,transparent 1px);background-size:46px 46px;z-index:1}

/* motion base */
.pk-js .pk-reveal{opacity:0;transform:translateY(22px);transition:opacity .7s ease,transform .7s ease}
.pk-js .pk-reveal.pk-seen{opacity:1;transform:none}

/* responsive + a11y base */
@media(max-width:640px){.pk-sec-head{flex-direction:column;align-items:flex-start}}
@media(prefers-reduced-motion:reduce){.pk-section *{animation:none!important;transition:none!important}.pk-js .pk-reveal{opacity:1;transform:none}}
.pk-section :focus-visible{outline:2px solid var(--pk-polymer);outline-offset:3px}

/* ---------- Contact-only components ---------- */
.pk-pagehead{background:var(--pk-ink);color:#fff;position:relative;overflow:hidden}
.pk-pagehead .pk-wrap{padding-top:clamp(74px,9vw,124px);padding-bottom:clamp(54px,8vw,92px);position:relative;z-index:2}
.pk-pagehead .pk-eyebrow{color:#5FC9C2}
.pk-pagehead .pk-eyebrow::before{background:#5FC9C2}
.pk-pagehead h1{color:#fff;font-size:clamp(2.3rem,5vw,4rem);font-weight:800;line-height:1.02;letter-spacing:-.02em;margin:16px 0 0;max-width:20ch}
.pk-pagehead p{margin-top:20px;max-width:54ch;color:#AEBBC2;font-size:clamp(1rem,1.4vw,1.12rem)}
.pk-pagehead .pk-cta-grid-bg{opacity:.09}

/* contact method cards */
.pk-contact-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--pk-line);border:1px solid var(--pk-line)}
.pk-cc{background:var(--pk-white);padding:28px 26px 30px;display:flex;flex-direction:column;min-height:172px}
.pk-cc .k{font-family:monospace;font-size:.64rem;letter-spacing:.14em;text-transform:uppercase;color:var(--pk-steel);margin-bottom:14px}
.pk-cc .v{font-size:1.05rem;font-weight:600;letter-spacing:-.01em;line-height:1.4;word-break:break-word}
.pk-cc .note{font-size:.84rem;color:var(--pk-steel);margin-top:auto;padding-top:14px}
.pk-cc a:hover{color:var(--pk-polymer)}

/* quote form panel */
.pk-form-wrap{display:grid;grid-template-columns:.9fr 1.1fr;gap:0;border:1px solid var(--pk-line);background:var(--pk-white)}
.pk-form-intro{padding:clamp(30px,4vw,44px);background:var(--pk-film-2);border-right:1px solid var(--pk-line);display:flex;flex-direction:column}
.pk-form-intro h2{font-size:clamp(1.5rem,2.4vw,2rem);font-weight:700;letter-spacing:-.02em;line-height:1.1}
.pk-form-intro p{color:var(--pk-ink-soft);margin-top:14px;max-width:42ch}
.pk-spec-list{list-style:none;margin:28px 0 0;padding:0;flex:1;display:flex;flex-direction:column}
.pk-spec-list li{font-family:monospace;font-size:.82rem;color:var(--pk-ink-soft);padding:clamp(14px,2.2vw,22px) 0;border-top:1px solid var(--pk-line);display:flex;align-items:center;gap:10px;flex:1;min-height:58px}
.pk-spec-list li::before{content:"\203A";color:var(--pk-polymer);font-weight:700}
.pk-form-panel{padding:clamp(30px,4vw,44px)}

/* native form look (preview placeholder) */
.pk-form label{font-family:monospace;font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;color:var(--pk-steel);display:block;margin-bottom:6px}
.pk-form input,.pk-form textarea,.pk-form select{width:100%;border:1px solid var(--pk-line-strong);border-radius:0;padding:.72em .8em;background:#fff;font-size:.95rem;font-family:inherit;color:var(--pk-ink);margin-bottom:18px}
.pk-form textarea{min-height:120px;resize:vertical}
.pk-form input:focus,.pk-form textarea:focus,.pk-form select:focus{border-color:var(--pk-polymer);outline:none;box-shadow:0 0 0 2px rgba(14,124,120,.15)}
.pk-form .row2{display:grid;grid-template-columns:1fr 1fr;gap:18px}

/* Fluent Forms overrides, scoped to the panel */
.pk-form-panel .ff-el-input--label label{font-family:monospace;font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;color:var(--pk-steel)}
.pk-form-panel .ff-el-form-control{border:1px solid var(--pk-line-strong);border-radius:0;padding:.72em .8em;background:#fff;font-size:.95rem}
.pk-form-panel .ff-el-form-control:focus{border-color:var(--pk-polymer);outline:none;box-shadow:0 0 0 2px rgba(14,124,120,.15)}
.pk-form-panel .ff-btn-submit{background:var(--pk-polymer);border:0;border-radius:0;color:#fff;font-weight:600;padding:.85em 1.6em;cursor:pointer;transition:.2s}
.pk-form-panel .ff-btn-submit:hover{background:var(--pk-polymer-deep)}

/* map */
.pk-map{margin-top:24px;border:1px solid var(--pk-line);min-height:320px;position:relative;display:flex;align-items:center;justify-content:center;background:radial-gradient(120% 120% at 30% 20%,rgba(14,124,120,.10),transparent 60%),linear-gradient(150deg,#dde7e9,#eef4f4)}
.pk-map iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block}
.pk-map .pk-map-note{font-family:monospace;font-size:.72rem;letter-spacing:.08em;color:var(--pk-steel);text-align:center;padding:0 20px}

/* mono tag row */
.pk-tags{display:flex;flex-wrap:wrap;gap:10px;margin-top:30px}
.pk-tags span{font-family:monospace;font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;color:var(--pk-ink-soft);border:1px solid var(--pk-line-strong);padding:8px 14px}

/* Contact responsive */
@media(max-width:920px){
  .pk-contact-grid{grid-template-columns:1fr 1fr}
  .pk-form-wrap{grid-template-columns:1fr}
  .pk-form-intro{border-right:none;border-bottom:1px solid var(--pk-line)}
}
@media(max-width:640px){
  .pk-contact-grid{grid-template-columns:1fr}
  .pk-form .row2{grid-template-columns:1fr}
}

/* ===== Fluent Forms skin · spec-sheet style ===== */
.pk-form-panel .fluentform .ff-el-group{
  margin-bottom: clamp(16px, 2vw, 22px);
}

/* label */
.pk-form-panel .fluentform .ff-el-input--label label{
  font-family: var(--pk-mono, ui-monospace, "SFMono-Regular", Menlo, monospace);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--pk-ink-2, #5b6878);   /* graphite-blue */
  margin-bottom: 8px;
}
.pk-form-panel .fluentform .ff-el-is-required.asterisk-right label:after{
  color: var(--pk-accent, #5b6878);
}

/* inputs + textarea */
.pk-form-panel .fluentform input[type=text],
.pk-form-panel .fluentform input[type=email],
.pk-form-panel .fluentform input[type=tel],
.pk-form-panel .fluentform input[type=url],
.pk-form-panel .fluentform input[type=number],
.pk-form-panel .fluentform select,
.pk-form-panel .fluentform textarea{
  width: 100%;
  background: #fff; 
  border: 1px solid var(--pk-line, #d4dae2);
  border-radius: 0;                  /* 方角 */
  padding: 12px 14px;
  font-family: inherit;
  font-size: 15px;
  color: var(--pk-ink, #1d2733);
  box-shadow: none;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.pk-form-panel .fluentform input::placeholder,
.pk-form-panel .fluentform textarea::placeholder{
  color: #9aa6b2;
}
.pk-form-panel .fluentform textarea{
  min-height: 180px;
  resize: vertical;
}

/* focus */
.pk-form-panel .fluentform input:focus,
.pk-form-panel .fluentform select:focus,
.pk-form-panel .fluentform textarea:focus{
  outline: none;
  border-color: var(--pk-ink-2, #5b6878);
  box-shadow: 0 0 0 1px var(--pk-ink-2, #5b6878);
}

/* submit button — 对齐 .pk-btn-primary */
.pk-form-panel .fluentform .ff-btn-submit,
.pk-form-panel .fluentform button[type=submit]{
  background: var(--pk-ink, #1d2733);
  color: #fff;
  border: 0;
  border-radius: 0;
  padding: 14px 28px;
  font-family: var(--pk-mono, ui-monospace, Menlo, monospace);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background .15s ease, transform .15s ease;
}
.pk-form-panel .fluentform .ff-btn-submit:hover,
.pk-form-panel .fluentform button[type=submit]:hover{
  background: var(--pk-accent, #5b6878);
}

/* =========================================================
   ELEMENTOR EDITOR FIX
   Force reveal elements visible inside Elementor editor.
   Frontend animation remains unchanged.
   ========================================================= */
/* Elementor Editor Preview Fix */
body.elementor-editor-active .pk-reveal,
body.elementor-editor-preview .pk-reveal,
body.elementor-editor-active .pk-section,
body.elementor-editor-preview .pk-section {
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
}