/* ============================================================
   ICOSA LTD  ·  Contact
   A split screen: the faceted panel carries the promise, the
   white half carries the form.
   ============================================================ */

.screen{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);
  min-height:100svh;
}

.screen-panel{ position:relative; isolation:isolate; overflow:hidden; }
.screen-panel::after{
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(180deg, rgba(118,28,0,.46) 0%, rgba(118,28,0,.32) 50%, rgba(118,28,0,.48) 100%);
}
.screen-panel-in{
  position:relative; z-index:2;
  padding:calc(var(--nav-h, 88px) + clamp(56px, 7vw, 120px)) clamp(28px, 5vw, 96px) clamp(56px, 6vw, 96px) var(--gutter);
  max-width:780px;
}
.screen h1{
  margin-top:28px;
  font-size:clamp(2.5rem, 1.2rem + 3.9vw, 5.4rem); font-weight:300; line-height:1.04; letter-spacing:-.025em;
  color:var(--white); text-wrap:balance;
}
.screen .intro{ margin-top:30px; max-width:46ch; font-size:var(--lede); font-weight:300; line-height:1.65; color:rgba(255,255,255,.95); }

.steps{ list-style:none; margin-top:clamp(40px, 4.4vw, 64px); border-top:1px solid rgba(255,255,255,.32); }
.steps li{
  display:flex; align-items:baseline; gap:22px; padding-block:18px;
  border-bottom:1px solid rgba(255,255,255,.32);
  font-size:1rem; line-height:1.6; color:var(--white);
}
.st-num{ flex:none; font-size:.7rem; font-weight:700; letter-spacing:.14em; color:rgba(255,255,255,.85); }

.direct{ margin-top:clamp(36px, 4vw, 56px); display:flex; flex-direction:column; gap:10px; }
.direct span{ font-size:.7rem; font-weight:700; letter-spacing:.2em; text-transform:uppercase; color:rgba(255,255,255,.88); }
.direct a{
  align-self:flex-start;
  font-size:clamp(1.4rem, 1rem + 1.4vw, 2.2rem); font-weight:300; letter-spacing:-.015em; color:var(--white);
  padding-bottom:4px;
  background:linear-gradient(var(--white), var(--white)) 0 100% / 100% 2px no-repeat;
  transition:background-size .6s var(--ease);
}
.direct a:hover{ background-size:0 2px; background-position:100% 100%; }

.screen-form{
  display:flex; align-items:center;
  padding:calc(var(--nav-h, 88px) + clamp(48px, 6vw, 104px)) var(--gutter) clamp(56px, 6vw, 104px) clamp(32px, 6vw, 120px);
}
.form-col{ width:100%; max-width:640px; }
.form-col > .intro{ color:var(--text-soft); }

@media (max-width: 980px){
  .screen{ grid-template-columns:minmax(0,1fr); min-height:0; }
  .screen-panel-in{ max-width:none; padding-inline:var(--gutter); }
  .screen-form{ padding:clamp(48px, 9vw, 80px) var(--gutter) clamp(64px, 10vw, 96px); }
  .form-col{ max-width:none; }
}