/* ==========================================================================
   Contact — positions measured from the original Squarespace page at 1361px wide.
   1 --u = 1px of that layout, so it scales with the window like the original.
   ========================================================================== */

.ct { --u: calc(100vw / 1361); --red: #b53033; --cream: #f7eee4; overflow: hidden; color: #000; }
.ct-sec { position: relative; height: calc(1035 * var(--u)); min-height: 760px; z-index: 1; }
.ct-clip { position: absolute; inset: 0; overflow: hidden; clip-path: url(#ct-clip); background: var(--cream); }
.ct-abs { position: absolute; }
.ct-stroke { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 8; overflow: visible; }
.ct-stroke path { fill: none; stroke: var(--red); stroke-width: 6; vector-effect: non-scaling-stroke; }

/* Light page header: dark logo + menu and the red line across the top, like the original */
body:has(.ct) .site-header { border-top: 4px solid var(--red); }
body:has(.ct) .site-header .brand img { filter: brightness(0); }
body:has(.ct) .nav a { color: #000; }
body:has(.ct) .menu-btn { color: #000; }
@media (max-width: 760px) { body:has(.ct) .menu-open .nav a { color: #fff; } body:has(.ct) .menu-open .menu-btn { color: #fff; } }

/* Layers (back to front): studio photo → robot → text and form */
.ct-photo { left: calc(631 * var(--u)); top: calc(168 * var(--u)); width: calc(702 * var(--u)); height: calc(761 * var(--u)); object-fit: cover; object-position: 44.13% 73.6%; z-index: 1; }
.ct-robot { left: calc(467 * var(--u)); top: calc(286 * var(--u)); width: calc(895 * var(--u)); height: calc(721 * var(--u)); z-index: 2; }
.ct-robot canvas { width: 100%; height: 100%; display: block; }

.ct-title { left: calc(28 * var(--u)); top: calc(247 * var(--u)); width: calc(647 * var(--u)); height: calc(68 * var(--u)); margin: 0; z-index: 3;
  font-size: calc(65.5 * var(--u)); line-height: calc(68 * var(--u)); color: var(--red); }
.ct-intro { left: calc(28 * var(--u)); top: calc(365 * var(--u)); width: calc(538 * var(--u)); z-index: 5; }
.ct-intro p { font-size: max(14px, calc(16 * var(--u))); line-height: 1.5; margin: 0 0 calc(14 * var(--u)); }
.ct-mail { font-family: var(--serif); font-size: calc(25.9 * var(--u)); color: var(--red); text-decoration: underline; text-underline-offset: 3px; }
.ct-spark { left: calc(302 * var(--u)); top: calc(416 * var(--u)); width: calc(99 * var(--u)); height: calc(68 * var(--u)); object-fit: contain; z-index: 6; pointer-events: none; }

/* Form — underlined fields, small "(required)" tags, red SEND button */
.ct-form { left: calc(28 * var(--u)); top: calc(495 * var(--u)); width: calc(538 * var(--u)); z-index: 4; display: grid; gap: calc(20 * var(--u)); font-size: max(14px, calc(16 * var(--u))); }
.ct-form fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.ct-form legend, .ct-field > span { display: block; padding: 0; margin-bottom: calc(4 * var(--u)); }
.ct-form small { font-size: .9em; color: #555; margin-left: .35em; }
.ct-row { display: grid; grid-template-columns: 1fr 1fr; gap: calc(9 * var(--u)); }
.ct-sub { font-size: max(11px, calc(12 * var(--u))); display: block; margin-bottom: 2px; }
.ct-field { display: block; position: relative; }
.ct-form input, .ct-form textarea {
  width: 100%; font: inherit; color: #000; background: transparent; border: 0; border-radius: 0; padding: 5px 0; outline: none;
  background-image: linear-gradient(var(--red), var(--red)), linear-gradient(#6b6b6b, #6b6b6b);
  background-size: 0 2px, 100% 1px; background-position: 0 100%, 0 100%; background-repeat: no-repeat;
  transition: background-size .45s var(--ease-out);
}
.ct-form input:focus, .ct-form textarea:focus { background-size: 100% 2px, 100% 1px; }
.ct-form textarea { height: calc(100 * var(--u)); min-height: 90px; resize: vertical; }
.ct-send {
  justify-self: start; border: 0; cursor: pointer; background: var(--red); color: #fff; border-radius: 10px;
  font-family: var(--body); font-size: max(14px, calc(16 * var(--u))); letter-spacing: .04em; padding: 16px 20.8px;
  transition: transform .35s var(--ease-out), background .3s;
}
.ct-send:hover { transform: translateY(-2px); background: #8f2426; }
.ct-status { margin: 0; font-family: var(--serif); color: var(--red); min-height: 1.4em; }

/* Footer tucks under the curved red line */
body:has(.ct) .site-footer { margin-top: calc(-17 * var(--u)); padding-top: calc(66 * var(--u)); }

/* ---------- Phones: stack into a column, robot sits over the photo below the form ---------- */
@media (max-width: 760px) {
  .ct-sec { height: auto; min-height: 0; }
  .ct-clip { position: relative; padding: 120px 16px 80px; display: flex; flex-direction: column; gap: 18px; }
  .ct-clip > .ct-abs { position: relative; left: auto; top: auto; width: auto; height: auto; }
  .ct-title { font-size: 46px; line-height: 1; }
  .ct-mail { font-size: 22px; }
  .ct-spark { position: absolute !important; right: 24px; top: 120px !important; width: 60px; height: 44px; }
  .ct-form { gap: 18px; }
  .ct-visual { position: relative; height: 120vw; margin: 10px -16px 0; }
  .ct-visual .ct-photo { position: absolute; inset: 0; left: 0; top: 0; width: 100%; height: 100%; }
  .ct-visual .ct-robot { position: absolute; inset: 0; left: 0; top: 0; width: 100%; height: 100%; }
  body:has(.ct) .site-footer { margin-top: -30px; padding-top: 60px; }
}
@media (min-width: 761px) { .ct-visual { display: contents; } }

/* undo the generic label styling from site.css */
.ct-form label, .ct-form legend { text-transform: none; letter-spacing: 0; font-size: inherit; display: block; gap: 0; }