/* Contact page (contact.php). Uses theme tokens from style.css */
.cpage{min-height:100vh}
.cshell{display:grid;grid-template-columns:200px 1fr;min-height:100vh;padding-top:78px}

/* Logo rail: scrolls upward, seamless loop (two copies, -50%) */
.crail{position:relative;overflow:hidden;border-right:1px solid var(--line);background:#1b1c1f;
  -webkit-mask-image:linear-gradient(transparent,#000 10%,#000 90%,transparent);mask-image:linear-gradient(transparent,#000 10%,#000 90%,transparent)}
.ctrack{display:flex;flex-direction:column;animation:cup 36s linear infinite;will-change:transform}
.crail:hover .ctrack{animation-play-state:paused}
.clogo{height:170px;flex:none;display:grid;place-items:center;padding:0 28px;border-bottom:1px solid #26282c}
.clogo img{max-width:100%;max-height:64px;width:auto;height:auto;opacity:.78}
@keyframes cup{to{transform:translateY(-50%)}}
@keyframes cleft{to{transform:translateX(-50%)}}

.cmain{display:flex;flex-direction:column;align-items:center;padding:64px 28px 96px}
.cmain h1{font-size:clamp(40px,6vw,76px);text-align:center;margin-bottom:52px}

/* Cream card with cut corners, hatched frame, registration marks (fixed colours so it reads in every theme) */
.ccard{--ct:#3d3a36;width:100%;max-width:684px;background:#ece4d4;padding:24px;color:var(--ct);
  clip-path:polygon(20px 0,calc(100% - 20px) 0,100% 20px,100% calc(100% - 20px),calc(100% - 20px) 100%,20px 100%,0 calc(100% - 20px),0 20px)}
.cframe{padding:16px;background:repeating-linear-gradient(135deg,rgba(61,58,54,.16) 0 1px,transparent 1px 4px)}
.cpanel{position:relative;background:#ece4d4;padding:36px}
.cpanel .mark{position:absolute;width:13px;height:13px;
  background:linear-gradient(var(--ct),var(--ct)) center/100% 1px no-repeat,linear-gradient(var(--ct),var(--ct)) center/1px 100% no-repeat}
.mark.tl{top:-8px;left:-8px}.mark.tr{top:-8px;right:-8px}.mark.bl{bottom:-8px;left:-8px}.mark.br{bottom:-8px;right:-8px}

.cpanel form{display:grid;gap:26px}
.cpanel .row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.cpanel label{display:block;font:600 11px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;margin-bottom:10px}
.cpanel input,.cpanel select{width:100%;height:42px;border:0;border-radius:0;background:#e0d6c4;color:var(--ct);font:400 14px var(--sans);padding:0 12px;appearance:none;-webkit-appearance:none}
.cpanel input::placeholder{color:#a39a8a}
.cpanel select{color:#a39a8a;cursor:pointer;background-repeat:no-repeat;background-position:right 12px center;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='8' fill='none' stroke='%233d3a36' stroke-width='1.6'%3E%3Cpath d='M1 1l6 6 6-6'/%3E%3C/svg%3E")}
.cpanel select.filled{color:var(--ct)}
.cpanel input:focus,.cpanel select:focus,.cpanel button:focus-visible{outline:2px solid var(--or);outline-offset:0}
.hp{position:absolute;left:-9999px;height:0;overflow:hidden;opacity:0}
.cpanel button{width:100%;height:54px;border:0;cursor:pointer;background:var(--or);color:#111;font:600 13px var(--mono);letter-spacing:.08em;text-transform:uppercase;
  clip-path:polygon(16px 0,100% 0,100% calc(100% - 16px),calc(100% - 16px) 100%,0 100%,0 16px);transition:background .25s,color .25s}
.cpanel button:hover{background:#1a1f1f;color:#e6e2d3}
.cpanel button:disabled{opacity:.6;cursor:wait}
.msg{font-size:14px;min-height:20px;margin-top:-8px}
.msg.err{color:#b3402a}.msg.ok{color:#2f6b43;font-weight:600}
.alt{margin-top:28px;font:400 12px var(--mono);letter-spacing:.04em;color:var(--mut)}
.alt a{color:var(--or);border-bottom:1px solid currentColor}

@media(max-width:820px){
  .cshell{grid-template-columns:1fr;grid-template-rows:auto 1fr}
  .crail{border-right:0;border-bottom:1px solid var(--line);
    -webkit-mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent)}
  .ctrack{flex-direction:row;width:max-content;animation-name:cleft}
  .clogo{height:84px;width:170px;border-bottom:0;border-right:1px solid #26282c}
  .cmain{padding:44px 16px 64px}
  .cpanel{padding:24px 20px}.cpanel .row{grid-template-columns:1fr}
}
@media(prefers-reduced-motion:reduce){.ctrack{animation:none}}