/* ============================================================
   Contact — the doors, then the room
   ============================================================ */

/* ---------- entrance ---------- */
.entry{
  position:relative; min-height:100vh; min-height:100svh; display:grid; align-items:center;
  padding:calc(var(--nav-h) + 4rem) 0 4rem; overflow:hidden;
}
.entry[hidden]{ display:none; }
.entry-wall{
  position:absolute; inset:0;
  background:
    radial-gradient(70% 60% at 74% 40%, rgba(124,154,247,.4), transparent 64%),
    linear-gradient(180deg,#F7FAFF,#DFE9FB);
}
.entry-wall::before{
  content:""; position:absolute; inset:0;
  background:repeating-linear-gradient(90deg, rgba(43,74,216,.05) 0 1px, transparent 1px 96px);
}
.entry-wall::after{
  content:""; position:absolute; inset:auto 0 0 0; height:24px;
  background:linear-gradient(180deg,#FFFFFF,#E4EBF9); border-top:1px solid rgba(43,74,216,.12);
}
.entry-inner{
  position:relative; z-index:2;
  display:grid; grid-template-columns:1.05fr .95fr;
  grid-template-areas:"kick door" "head door" "lede door" "alt door";
  gap:0 clamp(2rem,6vw,5rem); align-items:center;
}
.entry-inner .eyebrow{ grid-area:kick; }
.entry-inner h1{ grid-area:head; font-size:clamp(2.05rem,4.6vw,3.6rem); margin:1.3rem 0 0; }
.entry-lede{ grid-area:lede; margin-top:1.4rem; max-width:40ch; }

.entry-alt{
  grid-area:alt; list-style:none; margin:2.4rem 0 0; padding:0; max-width:440px;
  border-top:1px solid rgba(43,74,216,.16);
}
.entry-alt li{
  display:flex; align-items:baseline; justify-content:space-between; gap:1.4rem;
  padding:1rem .2rem; border-bottom:1px solid rgba(43,74,216,.16);
  transition:padding-left .4s var(--ease), border-color .4s;
}
.entry-alt li:hover{ padding-left:.7rem; border-color:var(--blue); }
.entry-alt span.k{
  font-size:.6rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--muted); flex:none;
}
.entry-alt a{
  font-family:var(--display); font-weight:700; font-size:1.06rem; letter-spacing:-.03em;
  color:var(--ink);
}
.entry-alt a:hover{ color:var(--blue-deep); }
/* icon-first social links, recognisable at a glance */
.entry-alt .socials{ display:flex; gap:.55rem; }
.entry-alt .socials a{
  display:inline-flex; align-items:center; gap:.5rem;
  padding:.5rem .95rem .5rem .75rem; border-radius:99px;
  background:#fff; border:1px solid var(--line);
  color:var(--ink); transition:.3s var(--ease);
}
.entry-alt .socials a svg{ flex:none; }
.entry-alt .socials a em{
  font-style:normal; font-family:var(--body); font-weight:600; font-size:.86rem;
  letter-spacing:-.01em;
}
.entry-alt .socials a:hover{
  border-color:var(--blue); color:var(--blue-deep);
  background:var(--wash-2); transform:translateY(-2px);
}

/* ---------- the double doors ---------- */
.doubledoor{
  --pull:38px;
  position:relative; display:block; padding:0; width:100%; aspect-ratio:.78;
  perspective:1500px; perspective-origin:50% 46%;
  border-radius:200px 200px 10px 10px;
  background:linear-gradient(160deg,#FFFFFF,#DCE6F8);
  box-shadow:0 46px 90px -50px rgba(11,27,61,.55), inset 0 0 0 1px rgba(43,74,216,.14);
  cursor:pointer; -webkit-tap-highlight-color:transparent; touch-action:manipulation;
  transition:transform .5s var(--ease-out), box-shadow .5s var(--ease);
}
.doubledoor:focus-visible{ outline:3px solid var(--blue-deep); outline-offset:6px; }

/* the whole assembly lifts a little when it's the thing you're about to press */
@media (hover:hover){
  .doubledoor:hover{
    transform:translateY(-4px);
    box-shadow:0 54px 100px -48px rgba(11,27,61,.6), inset 0 0 0 1px rgba(43,74,216,.24);
  }
}
.doubledoor:active{ transform:translateY(-1px) scale(.995); }
.entry.opening .doubledoor{
  transform:scale(1.06); box-shadow:0 60px 110px -50px rgba(11,27,61,.55);
  transition:transform 1.5s cubic-bezier(.3,0,.2,1), box-shadow 1.2s var(--ease);
  cursor:default;
}
.entry.opening .doorsign, .entry.opening .door-hint{
  opacity:0; transform:translateY(-6px);
  transition:opacity .45s var(--ease), transform .6s var(--ease-out);
}

.dd-light{
  position:absolute; inset:16px 16px 0; border-radius:188px 188px 6px 6px;
  background:radial-gradient(120% 90% at 50% 62%, #FFFFFF, #FFF9EA 46%, #FFF0C8 74%, #F5E7BE);
  opacity:0; transition:opacity .9s var(--ease) .4s;
}
.entry.opening .dd-light{ opacity:1; }

.dd-leaf{
  position:absolute; top:16px; bottom:0; width:calc(50% - 16px); display:block;
  background:linear-gradient(150deg,#5473EE 0%, #3A59D4 58%, #2E49BC 100%);
  backface-visibility:hidden;
  /* two speeds on purpose: the hover peek has to answer immediately,
     the real swing is slow and weighted */
  transition:transform .45s var(--ease-out), filter .45s var(--ease);
  will-change:transform;
}
.dd-l{
  left:16px; border-radius:188px 0 0 6px; transform-origin:left center;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.26), inset -16px 0 26px -18px rgba(11,27,61,.6);
}
.dd-r{
  right:16px; border-radius:0 188px 6px 0; transform-origin:right center;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.26), inset 16px 0 26px -18px rgba(11,27,61,.6);
}
/* the leaves ease apart on hover, so it is obvious they open */
@media (hover:hover){
  .doubledoor:hover .dd-l{ transform:rotateY(-6deg); filter:brightness(1.04); }
  .doubledoor:hover .dd-r{ transform:rotateY(6deg);  filter:brightness(1.04); }
}
/* touch has no hover, so the press itself gives the same feedback */
.doubledoor:active .dd-l{ transform:rotateY(-6deg); }
.doubledoor:active .dd-r{ transform:rotateY(6deg); }

/* the swing: 92deg lands the leaf edge-on, which reads as fully open without
   ever turning far enough to show the back of the slab */
.entry.opening .dd-leaf{
  transition:transform 1.3s cubic-bezier(.34,.03,.18,1), filter 1.3s var(--ease);
}
.entry.opening .dd-l{ transform:rotateY(-92deg) !important; filter:brightness(.62); }
.entry.opening .dd-r{ transform:rotateY(92deg)  !important; filter:brightness(.5); }

/* recessed panels */
.dd-panel{
  position:absolute; left:16%; right:16%; top:9%; height:30%;
  border-radius:128px 128px 4px 4px;
  box-shadow:
    inset 0 0 0 1.5px rgba(255,255,255,.3),
    inset 2px 2px 0 rgba(11,27,61,.16),
    inset -2px -2px 0 rgba(255,255,255,.2);
  background:rgba(255,255,255,.06);
}
.dd-panel.small{ top:48%; height:40%; border-radius:4px; }
.dd-l .dd-panel{ left:22%; right:10%; }
.dd-r .dd-panel{ left:10%; right:22%; }

/* the meeting line */
.dd-seam{
  position:absolute; left:50%; top:16px; bottom:0; width:2px; translate:-50% 0; z-index:3;
  background:rgba(11,27,61,.22); transition:opacity .4s var(--ease);
}
.entry.opening .dd-seam{ opacity:0; }

/* Ring pull. It is two half-rings, one mounted on each leaf, meeting at the
   seam to read as a single circle. A whole ring cannot be done here: it would
   have to belong to one leaf and would tear away from the other the moment the
   doors move. Split in two, the hardware parts with the doors, which is what
   real double-door furniture does. */
.dd-pull{
  position:absolute; top:52%; z-index:4; pointer-events:none;
  width:var(--pull); height:var(--pull); border-radius:50%;
  border:3px solid rgba(255,255,255,.58);
  box-shadow:inset 0 1px 3px rgba(11,27,61,.34);
  transition:border-color .45s var(--ease), box-shadow .45s var(--ease);
}
.dd-l .dd-pull{
  right:calc(var(--pull) / -2); translate:0 -50%;
  clip-path:inset(0 50% 0 0);            /* keep the half sitting on this leaf */
}
.dd-r .dd-pull{
  left:calc(var(--pull) / -2); translate:0 -50%;
  clip-path:inset(0 0 0 50%);
}
@media (hover:hover){
  .doubledoor:hover .dd-pull{
    border-color:rgba(255,255,255,.9);
    box-shadow:inset 0 1px 3px rgba(11,27,61,.36), 0 0 14px rgba(255,255,255,.35);
  }
}
.entry.opening .dd-pull{ opacity:0; transition:opacity .35s var(--ease); }

/* a hanging sign above the doors */
.door-area{ grid-area:door; justify-self:center; display:grid; justify-items:center; width:min(90%,400px); }
.doorsign{
  display:flex; align-items:center; gap:.9rem; margin:0 0 1.1rem; pointer-events:none;
  transition:opacity .5s var(--ease);
}
.doorsign::before, .doorsign::after{ content:""; width:30px; height:1.5px; background:rgba(43,74,216,.32); }
.doorsign span{
  font-family:var(--display); font-weight:800; letter-spacing:.02em;
  font-size:.9rem; text-transform:uppercase; color:var(--blue-deep);
  padding:.55rem 1.2rem; border-radius:4px; white-space:nowrap;
  background:#fff; border:1px solid rgba(43,74,216,.22);
  box-shadow:0 4px 12px -5px rgba(11,27,61,.35);
}
.door-hint{
  margin-top:1.1rem; font-size:.74rem; font-weight:600; letter-spacing:.14em;
  text-transform:uppercase; color:var(--blue-deep);
  animation:signPulse 2.8s var(--ease) infinite;
}
@keyframes signPulse{ 0%,100%{ opacity:.5 } 50%{ opacity:1 } }
.entry.opening .doorsign, .entry.opening .door-hint{ opacity:0; }

/* white-out wipe */
.entry::after{
  content:""; position:fixed; inset:0; background:#fff; opacity:0; visibility:hidden;
  z-index:100; transition:opacity .5s var(--ease), visibility .5s; pointer-events:none;
}
.entry.flooding::after{ opacity:1; visibility:visible; }
.entry::after{ transition:opacity .75s var(--ease), visibility .75s; }

/* ---------- the room ---------- */
.room{
  position:relative; min-height:100vh; min-height:100svh; background:#fff;
  display:flex; flex-direction:column; padding-top:var(--nav-h);
}
.room[hidden]{ display:none; }
.room-top{ position:sticky; top:var(--nav-h); z-index:20; background:rgba(255,255,255,.94); backdrop-filter:blur(12px); }
.room-top-in{
  max-width:var(--maxw); margin-inline:auto; padding:1rem var(--gut);
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
}
.room-step{
  font-size:.72rem; font-weight:600; letter-spacing:.16em;
  text-transform:uppercase; color:var(--muted);
}
.counter{ text-align:right; }
.counter-k{
  display:block; font-size:.54rem; letter-spacing:.24em;
  text-transform:uppercase; color:var(--muted);
}
.counter-v{ font-family:var(--display); font-weight:800; letter-spacing:-.04em; font-size:1.5rem; line-height:1; color:var(--ink); }
.counter-v b{ color:var(--blue-deep); }
.counter-v i{ font-style:normal; opacity:.28; margin:0 .12em; }
.counter-v span{ opacity:.38; }
.room-progress{ height:2px; background:var(--wash); }
.room-progress i{ display:block; height:100%; width:14%; background:var(--blue); transition:width .5s var(--ease-out); }

.room-body{
  flex:1; display:grid; align-items:center;
  max-width:var(--maxw); width:100%; margin-inline:auto; padding:clamp(2.5rem,7vw,5rem) var(--gut);
}
.qform{ max-width:720px; }
.q-stage{ min-height:300px; position:relative; }

/* page-turn sweep */
.leaf{
  position:absolute; inset:-2rem -2rem -2rem -2.5rem; z-index:5; pointer-events:none;
  background:var(--wash);
  border-right:2px solid var(--blue-pale);
  box-shadow:22px 0 46px -18px rgba(11,27,61,.34);
  transform-origin:left center;
  transform:perspective(1600px) rotateY(-100deg);
  opacity:0;
}
.leaf.go{ animation:leafTurn .95s var(--ease-out) forwards; }
.leaf.back{ transform-origin:right center; border-right:0; border-left:2px solid var(--blue-pale);
  box-shadow:-22px 0 46px -18px rgba(11,27,61,.34); }
.leaf.back.go{ animation:leafTurnBack .95s var(--ease-out) forwards; }
@keyframes leafTurn{
  0%  { transform:perspective(1600px) rotateY(-100deg); opacity:0; }
  18% { opacity:1; }
  62% { transform:perspective(1600px) rotateY(-16deg); opacity:1; }
  100%{ transform:perspective(1600px) rotateY(0deg);   opacity:0; }
}
@keyframes leafTurnBack{
  0%  { transform:perspective(1600px) rotateY(100deg); opacity:0; }
  18% { opacity:1; }
  62% { transform:perspective(1600px) rotateY(16deg);  opacity:1; }
  100%{ transform:perspective(1600px) rotateY(0deg);   opacity:0; }
}

.q{ animation:qIn .62s var(--ease-out) .04s both; }
@keyframes qIn{ from{ opacity:0; transform:translateX(26px) } }
.q-out{ animation:qOut .34s var(--ease) forwards; }
.q-out-back{ animation:qOutBack .34s var(--ease) forwards; }
@keyframes qOut{ to{ opacity:0; transform:translateX(-24px) } }
@keyframes qOutBack{ to{ opacity:0; transform:translateX(24px) } }
.q-k{
  font-size:.62rem; letter-spacing:.22em; text-transform:uppercase;
  color:var(--blue-deep); display:flex; align-items:center; gap:.7em;
}
.q-k::before{ content:""; width:24px; height:1.5px; background:currentColor; opacity:.55; }
.q h2{ font-size:clamp(1.5rem,3vw,2.3rem); margin:1.05rem 0 0; }
.q-help{ margin-top:.8rem; font-size:.95rem; max-width:48ch; }

.q-field{ margin-top:1.9rem; }
.q-field input[type="text"], .q-field textarea{
  width:100%; border:0; border-bottom:2px solid var(--wash); background:transparent;
  font-family:var(--display); font-weight:600; letter-spacing:-.03em;
  font-size:clamp(1.25rem,2.6vw,1.8rem); color:var(--ink); padding:.4rem 0 .7rem;
  transition:border-color .35s var(--ease);
}
.q-field textarea{
  font-family:var(--body); font-weight:400; font-size:1.05rem; letter-spacing:0;
  line-height:1.6; min-height:120px; resize:vertical;
  border:1px solid var(--line); border-radius:14px; padding:1rem 1.1rem;
}
.q-field input::placeholder, .q-field textarea::placeholder{ color:#B9C6DE; }
.q-field input:focus, .q-field textarea:focus{ outline:none; border-color:var(--blue); }

.chips{ display:flex; flex-wrap:wrap; gap:.55rem; }
.chip{
  padding:.72rem 1.15rem; border-radius:99px; border:1.5px solid var(--line);
  font-size:.94rem; font-weight:500; color:var(--ink-2); background:#fff;
  transition:.3s var(--ease);
}
.chip:hover{ border-color:var(--blue); color:var(--blue-deep); }
.chip.on{ background:var(--blue); border-color:var(--blue); color:#fff; }
.chip.on::after{ content:" ✓"; font-size:.8em; }
.chip.grade{ min-width:56px; text-align:center; }

.q-controls{ display:flex; align-items:center; gap:1rem; margin-top:2.4rem; }
.q-next{
  display:inline-flex; align-items:center; gap:.7rem; padding:.95rem 1.7rem; border-radius:99px;
  background:var(--blue); color:#fff; font-weight:600;
  transition:transform .4s var(--ease-out), box-shadow .5s var(--ease), filter .3s;
}
.q-next:hover{ transform:translateY(-2px); filter:brightness(1.07); box-shadow:0 16px 36px -16px rgba(78,111,245,.9); }
.q-next kbd{ font-size:.7rem; padding:.1rem .38rem; border-radius:5px; background:rgba(255,255,255,.24); }
.q-back{
  font-size:.68rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--muted); padding:.6rem .2rem; transition:color .3s;
}
.q-back:hover{ color:var(--blue-deep); }
.q-back[hidden]{ display:none; }
.q-error{ margin-top:1rem; color:#C0392B; font-size:.88rem; min-height:1.2em; }

/* ---------- review ---------- */
.review[hidden], .sent[hidden]{ display:none; }
.review{ max-width:760px; animation:qIn .45s var(--ease-out); }
.review h2{ font-size:clamp(1.6rem,3vw,2.4rem); margin:1.05rem 0 2.1rem; }
.review-list{
  margin:0; display:grid; gap:1px; background:var(--line-soft);
  border:1px solid var(--line-soft); border-radius:18px; overflow:hidden;
}
.review-list > div{
  background:#fff; padding:1.1rem 1.4rem; display:grid; grid-template-columns:170px 1fr; gap:1rem;
  align-items:baseline;
}
.review-list dt{
  font-size:.62rem; letter-spacing:.18em; text-transform:uppercase; color:var(--muted);
}
.review-list dd{ margin:0; font-size:1rem; color:var(--ink); font-weight:500; }
.review-list dd.blank{ color:#B0BDD5; font-weight:400; }
.review-actions{ display:flex; flex-wrap:wrap; align-items:center; gap:.8rem; margin-top:2rem; }
.review-note{ margin-top:1.5rem; font-size:.88rem; max-width:56ch; }
.review-note a{ color:var(--blue-deep); border-bottom:1px solid currentColor; }

/* ---------- sent ---------- */
.sent{ max-width:600px; animation:qIn .45s var(--ease-out); }
.sent-mark{
  width:62px; height:62px; border-radius:50%; display:grid; place-items:center;
  background:var(--blue); color:#fff; font-size:1.7rem; margin-bottom:1.7rem;
  box-shadow:0 16px 36px -16px rgba(78,111,245,.9);
}
.sent h2{ font-size:clamp(1.6rem,3vw,2.4rem); }
.sent p{ margin-top:1.05rem; }
.sent-actions{ display:flex; gap:.8rem; flex-wrap:wrap; margin-top:2rem; }

/* the footer is noise while filling in a form; the nav stays */
body.in-room .foot{ display:none; }

/* ---------- responsive ---------- */
@media (max-width:900px){
  .entry-inner{ grid-template-columns:1fr; grid-template-areas:"kick" "head" "lede" "door" "alt"; }
  .door-area{ margin:2.2rem auto .5rem; width:min(100%,300px); }
  .review-list > div{ grid-template-columns:1fr; gap:.3rem; }
  .entry-alt li{ flex-direction:column; align-items:flex-start; gap:.3rem; }
}


/* ---------- contact page responsiveness ---------- */
@media (max-width:1100px){
  .door-area{ width:min(100%,340px); }
}
@media (max-width:900px){
  .entry{ padding:calc(var(--nav-h) + 2.5rem) 0 3rem; min-height:0; }
  .entry-inner{ text-align:left; }
  .doorsign span{ font-size:.82rem; padding:.5rem 1rem; }
  .entry-alt .socials{ flex-wrap:wrap; }
}
@media (max-width:560px){
  .door-area{ width:min(100%,250px); }
  .doorsign::before, .doorsign::after{ width:18px; }
  .doubledoor{ --pull:30px; }
  .room-body{ padding:2rem var(--gut) 3rem; }
  .q-stage{ min-height:260px; }
  .q-controls{ gap:.7rem; }
  .q-next{ padding:.85rem 1.3rem; }
}
@media (max-width:380px){
  .door-area{ width:min(100%,220px); }
}

.send-fail{
  margin-top:1.2rem; padding:.9rem 1.1rem; border-radius:12px;
  background:#FDECEA; border:1px solid rgba(168,68,58,.28);
  color:#8C3A31; font-size:.89rem; line-height:1.55;
}
.send-fail a{ color:#8C3A31; font-weight:600; border-bottom:1px solid currentColor; }