/* Connect: one screen, direct. A forest panel with the invitation and the email address, and four fields beside it. */
.ct{min-height:calc(100svh - var(--svc-header,90px));display:flex;background:var(--cream)}
.ct-grid{width:100%;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr)}

.ct-side{display:flex;align-items:center;color:var(--cream);background:radial-gradient(90% 80% at 20% 15%,#2e5838 0%,transparent 62%),var(--ink)}
.ct-side-inner{width:100%;max-width:620px;margin-left:auto;padding:clamp(36px,7svh,80px) clamp(28px,5vw,80px) clamp(36px,7svh,80px) var(--gutter)}
.ct h1{margin:0 0 clamp(16px,3svh,26px);font:400 clamp(48px,min(6vw,11svh),104px)/.94 var(--serif);letter-spacing:-.05em;color:var(--cream)}
.ct h1 em{display:block;font-weight:300;color:var(--gold)}
.ct-side p{margin:0 0 clamp(22px,4.5svh,40px);max-width:34ch;font:400 clamp(18px,1.5vw,22px)/1.45 var(--serif);color:#faf7efd1}
.ct-mail{color:var(--cream)}

.ct-form{display:flex;flex-direction:column;justify-content:center;gap:clamp(14px,2.4svh,22px);width:100%;max-width:640px;padding:clamp(32px,6svh,72px) var(--gutter) clamp(32px,6svh,72px) clamp(28px,5vw,80px)}
.ct-row{display:grid;grid-template-columns:1fr 1fr;gap:clamp(14px,2vw,24px)}
.ct-field{display:flex;flex-direction:column;gap:8px}
.ct-field>span{font-size:13px;font-weight:600;color:var(--ink)}
.ct-field input,.ct-field textarea{width:100%;box-sizing:border-box;padding:12px 0 10px;border:0;border-bottom:1.5px solid #1f3d2640;border-radius:0;background:transparent;font:400 clamp(17px,1.3vw,20px)/1.4 var(--serif);color:var(--ink);transition:border-color .3s}
.ct-field textarea{resize:vertical;min-height:4.4em;max-height:30svh}
.ct-field input:focus,.ct-field textarea:focus{outline:0;border-bottom-color:var(--gold)}
.ct-field input:focus-visible,.ct-field textarea:focus-visible{box-shadow:0 2px 0 var(--gold)}
.ct-send{align-self:flex-start;display:inline-flex;align-items:center;gap:22px;min-height:54px;margin-top:6px;padding:0 10px 0 26px;border:0;border-radius:4px 26px 4px 4px;background:var(--ink);color:var(--cream);font:600 15px/1 var(--sans);cursor:pointer;transition:background .3s}
.ct-send i{display:grid;place-items:center;width:38px;height:38px;border-radius:2px 18px 2px 2px;background:var(--gold);color:var(--ink);font-style:normal;transition:transform .45s var(--ease)}
.ct-send:hover i,.ct-send:focus-visible i{transform:translateX(5px)}
.ct-send:focus-visible{outline:3px solid var(--gold);outline-offset:4px}

/* arrival */
.js .ct h1,.js .ct-side p,.js .ct-mail,.js .ct-form>*{opacity:0;transform:translateY(22px);transition:opacity .8s,transform 1s var(--ease)}
.js .ct-side p{transition-delay:.12s}.js .ct-mail{transition-delay:.2s}
.js .ct-form>*:nth-child(1){transition-delay:.25s}.js .ct-form>*:nth-child(2){transition-delay:.32s}.js .ct-form>*:nth-child(3){transition-delay:.39s}.js .ct-form>*:nth-child(4){transition-delay:.46s}
.js .ct.is-in h1,.js .ct.is-in .ct-side p,.js .ct.is-in .ct-mail,.js .ct.is-in .ct-form>*{opacity:1;transform:none}

@media(max-width:820px){
  .ct-grid{grid-template-columns:1fr}
  .ct-side-inner{margin:0;padding:clamp(32px,6svh,56px) var(--gutter)}
  .ct-form{max-width:none;padding:clamp(28px,5svh,48px) var(--gutter) clamp(40px,7svh,64px)}
}
@media(max-width:520px){.ct-row{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){.js .ct h1,.js .ct-side p,.js .ct-mail,.js .ct-form>*{opacity:1;transform:none;transition:none}}