/* ===== contact.css — CONTACT US page (.ct-* scheme, matches reference contact.html) =====
   Page-specific styles only. Common nav / footer / buttons / reset / tokens come from
   /css/index.css. Design tokens are scoped to .contact-page (on <body>) so they never
   leak into nav or footer. The .ct-* rules below are the contact template's own design
   (hero + contact info + inquiry form + status), shared with no other site. */

.contact-page{
  --bg-900:#FFFFFF;
  --bg-800:#F5F7F6;
  --bg-700:#FFFFFF;
  --bg-600:#EDF1EF;

  --brand:#264F47;
  --brand-lit:#2F6159;
  --brand-deep:#1B3A34;
  --brand-lift:#5A9E90;

  --ink:#0F1714;
  --ink-2:#5B6863;
  --ink-3:#8A9691;
  --accent:#2F6159;

  --brand-on-dark:#5A9E90;
  --silver:#C9C9C9;
  --white:#F5F7F6;
  --muted:#A8B5B0;

  --line-1:rgba(15,23,20,.08);
  --line-2:rgba(15,23,20,.14);
  --line-3:rgba(15,23,20,.26);
  --line-dark-1:rgba(201,201,201,.10);
  --line-dark-2:rgba(201,201,201,.20);

  --dark:#0B1512;
  --shell:1240px;
  --gut:clamp(20px,4.2vw,44px);
  --nav-h:76px;
  --sect:clamp(64px,8vw,112px);

  --r-xs:8px;
  --r-sm:14px;
  --r-lg:32px;

  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
  --ease-soft:cubic-bezier(.4,0,.2,1);

  --sans:system-ui,-apple-system,'Segoe UI',Roboto,'Helvetica Neue',Arial,'PingFang SC','Microsoft YaHei',sans-serif;
  --display:system-ui,-apple-system,'Segoe UI',Roboto,'Helvetica Neue',Arial,'PingFang SC','Microsoft YaHei',sans-serif;
  --num:system-ui,-apple-system,'Segoe UI',Roboto,'Helvetica Neue',Arial,'PingFang SC','Microsoft YaHei',sans-serif;
}

/* ======================================================== CONTACT HERO */
.ct-hero{background:linear-gradient(180deg,#2c5a52 0%,#264F47 100%);padding:calc(var(--nav-h) + clamp(72px,9vw,128px)) 0 clamp(40px,5vw,64px);
  text-align:center}
.ct-hero__eyebrow{display:inline-flex;align-items:center;gap:11px;font-family:var(--num);font-weight:600;
  font-size:.72rem;letter-spacing:.22em;text-transform:uppercase;color:rgba(255,255,255,.85)}
.ct-hero__eyebrow::before{content:'';width:24px;height:1px;background:currentColor}
.ct-hero__title{margin:22px auto 0;max-width:18ch;font-family:var(--display);font-weight:700;
  font-size:clamp(2rem,4.3vw,3.35rem);line-height:1.06;letter-spacing:-.025em;color:#FFFFFF}
.ct-hero__sub{margin:18px auto 0;max-width:60ch;font-size:1.0625rem;line-height:1.66;color:rgba(255,255,255,.82)}

/* ================================================ CONTACT INFO + FORM */
.ct-section{background:var(--bg-800);padding:clamp(48px,5.4vw,80px) 0 var(--sect);scroll-margin-top:var(--nav-h)}
.ct-grid{display:grid;grid-template-columns:.92fr 1.08fr;gap:76px;align-items:start}

.ct-info{display:flex;flex-direction:column;gap:30px}
.ct-item{display:flex;gap:18px;align-items:flex-start}
.ct-ic{flex:none;display:flex;width:44px;height:44px;align-items:center;justify-content:center;
  border:1px solid rgba(38,79,71,.18);border-radius:var(--r-xs);background:rgba(38,79,71,.05);color:var(--accent)}
.ct-ic svg{width:22px;height:22px;fill:currentColor;stroke:none;stroke-width:1.3;stroke-linecap:round;stroke-linejoin:round}
.ct-ic--mail svg{fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.ct-item__body{min-width:0}
.ct-item__t{margin:2px 0 6px;font-family:var(--num);font-weight:600;font-size:.78rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--accent)}
.ct-item__d{font-size:.98rem;line-height:1.6;color:var(--ink-2)}
.ct-item__d a{display:block;color:var(--ink);transition:color .3s var(--ease)}
.ct-item__d a:hover{color:var(--accent)}
.ct-item__d span{display:block}

/* form card */
.ct-card{background:#FFFFFF;border:1px solid rgba(15,23,20,.14);border-radius:24px;
  box-shadow:0 30px 70px -44px rgba(15,23,20,.32);padding:clamp(26px,3.4vw,40px)}
.ct-form{display:flex;flex-direction:column;gap:20px}
.ct-row{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.ct-field{display:flex;flex-direction:column;gap:8px}
.ct-label{font-family:var(--num);font-weight:600;font-size:.74rem;letter-spacing:.13em;text-transform:uppercase;
  color:var(--accent)}
.ct-label .req{color:var(--ink-3);margin-left:4px}
.ct-input,.ct-textarea{width:100%;font-family:inherit;font-size:.95rem;color:var(--ink);
  background:#FFFFFF;border:1px solid rgba(15,23,20,.26);border-radius:12px;padding:12px 14px;
  transition:border-color .3s var(--ease),box-shadow .3s var(--ease)}
.ct-input::placeholder,.ct-textarea::placeholder{color:var(--ink-3)}
.ct-input:focus,.ct-textarea:focus{outline:none;border-color:var(--brand);
  box-shadow:0 0 0 3px rgba(38,79,71,.12)}
.ct-textarea{resize:vertical;min-height:112px;line-height:1.6}
.ct-submit{align-self:flex-start;display:inline-flex;align-items:center;gap:10px;height:47px;padding:0 26px;
  border:0;border-radius:999px;background:var(--brand);color:#FFFFFF;font-family:var(--sans);font-weight:600;
  font-size:.95rem;letter-spacing:.01em;cursor:pointer;
  transition:background-color .35s var(--ease),transform .35s var(--ease-out),box-shadow .35s var(--ease)}
.ct-submit:hover{background:var(--brand-lit);transform:translateY(-2px);box-shadow:0 14px 30px -16px rgba(38,79,71,.7)}
.ct-submit:active{transform:scale(.98)}
.ct-submit svg{width:15px;height:15px;fill:currentColor;stroke:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;
  transition:transform .45s var(--ease-out)}
.ct-submit:hover svg{transform:translateX(4px)}
.ct-status{margin:0;font-size:.82rem;line-height:1.6;color:var(--ink-2);min-height:1.2em}
.ct-status.is-ok{color:var(--brand-lit)}

/* ===================================================== RESPONSIVE */
@media (max-width:992px){
  .ct-grid{grid-template-columns:1fr;gap:clamp(38px,5vw,52px)}
}
@media (max-width:768px){
  .ct-row{grid-template-columns:1fr}
  .ct-submit{align-self:stretch;justify-content:center}
}