/* Contact options (round 2, second pass). Classes are prefixed co-a / co-b / co-c (co- for shared bits).
   Every option: the full form on the first screen (desktop) / right at the top (phone), over a real job photo. */

/* ------------------------------------------------------------ the form, shared */
.co-form{position:relative;background:#fff;color:var(--ink);border-radius:24px;padding:clamp(1.3rem,2.2vw,1.9rem);box-shadow:0 50px 90px -40px rgba(5,4,30,.75)}
.co-form__head{display:grid;gap:.25rem}
.co-form__head .lbl{color:var(--red)}
.co-form__head b{font-family:var(--f-disp);font-weight:400;text-transform:uppercase;font-size:clamp(1.3rem,1.7vw,1.65rem);line-height:1.05;color:var(--navy)}
.co-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.75rem 1rem;margin:1.1rem 0 1.1rem}
.co-grid--3{grid-template-columns:repeat(6,minmax(0,1fr))}
.co-grid--3>.co-f{grid-column:span 2}
.co-grid--3>.co-f--sel{grid-column:span 3}
.co-grid--3>.co-f--sel+.co-f{grid-column:span 3}
.co-grid>.co-f--wide,.co-grid--3>.co-f--wide{grid-column:1/-1}
.co-f{position:relative;display:grid;gap:.32rem;min-width:0}
.co-f>span{font-size:.68rem;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-70)}
.co-f small{font-size:.66rem;letter-spacing:.06em;text-transform:none;color:var(--ink-50);margin-left:.3em}
.co-f input,.co-f select,.co-f textarea{font:inherit;font-size:1rem;color:var(--ink);background:var(--paper);border:1px solid transparent;border-radius:12px;padding:.8rem 1rem;width:100%;min-height:50px;transition:border-color .3s,background .3s,box-shadow .3s}
.co-f textarea{resize:vertical;min-height:0;line-height:1.45}
.co-f select{-webkit-appearance:none;appearance:none;padding-right:2.6rem;cursor:pointer}
.co-f--sel>.ic{position:absolute;right:1rem;bottom:17px;width:16px;height:16px;color:var(--navy);pointer-events:none}
.co-f input:focus,.co-f select:focus,.co-f textarea:focus{outline:0;border-color:var(--navy);background:#fff;box-shadow:0 0 0 4px rgba(16,15,75,.08)}
.co-f input::placeholder,.co-f textarea::placeholder{color:var(--ink-50)}
.co-send{min-height:54px;font-size:1rem}
.co-fine{font-size:.78rem;line-height:1.45;color:var(--ink-50);margin:.75rem 0 0;text-align:center}

/* the two big buttons: call and text */
.co-calls{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.6rem}
.co-call{display:flex;align-items:center;gap:.75rem;padding:.75rem 1rem;border-radius:16px;border:1px solid rgba(255,255,255,.4);background:rgba(10,9,52,.38);color:#fff;transition:background .35s,border-color .35s,transform .45s var(--e-out);min-width:0}
.co-call .ic{width:2.3rem;height:2.3rem;padding:.55rem;border-radius:50%;background:rgba(255,255,255,.12);flex:0 0 auto}
.co-call span{display:grid;line-height:1.2;font-weight:600;font-size:1.02rem;min-width:0;white-space:nowrap}
.co-call small{font-size:.62rem;font-weight:500;letter-spacing:.16em;text-transform:uppercase;opacity:.8;margin-bottom:.18rem}
.co-call:hover{transform:translateY(-2px);border-color:#fff}
.co-call--red{background:var(--red);border-color:var(--red)}
.co-call--red:hover{background:#d8141d;border-color:#d8141d}
/* on white: navy outline + red */
.co-b__calls .co-call:not(.co-call--red),.co-c__env .co-call:not(.co-call--red){background:#fff;color:var(--navy);border-color:var(--line)}
.co-b__calls .co-call:not(.co-call--red) .ic,.co-c__env .co-call:not(.co-call--red) .ic{background:var(--sky);color:var(--navy)}
.co-b__calls .co-call:not(.co-call--red):hover,.co-c__env .co-call:not(.co-call--red):hover{border-color:var(--navy)}
.co-call--red .ic{background:rgba(255,255,255,.18)}

/* the job photo, larger than its frame so it can drift without showing an edge */
[data-drift-ph]{will-change:transform}
[data-drift-ph] img{width:100%;height:100%;object-fit:cover}

/* ============================================================ A · the front door */
.co-a{position:relative;overflow:hidden;background:var(--navy-2);color:#fff;min-height:100svh;display:flex;flex-direction:column;justify-content:center}
.co-a__bg{position:absolute;inset:0;overflow:hidden}
.co-a__ph{position:absolute;inset:-7% -2% -7% -10%}
.co-a__ph img{object-position:52% 45%;animation:co-push 2.4s var(--e-out) backwards}
@keyframes co-push{from{transform:scale(1.08);opacity:.4}}
.co-a__scrim{position:absolute;inset:0;background:linear-gradient(90deg,rgba(10,9,52,.94) 0%,rgba(10,9,52,.76) 32%,rgba(10,9,52,.18) 52%,rgba(10,9,52,.5) 100%),linear-gradient(0deg,rgba(10,9,52,.7),transparent 30%)}
.co-a__in{position:relative;z-index:1;width:100%;max-width:var(--max);margin:0 auto;padding:calc(var(--hdr) + 2.2rem) var(--gut) 3.6rem;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,560px);gap:clamp(2rem,6vw,7rem);align-items:center}
.opt-bar+.co-a{min-height:0}
.opt-bar+.co-a .co-a__in{padding-top:2.2rem}
.co-a__say>.lbl{color:#ff8a8f;margin-bottom:1.1rem}
.co-a__say h1{max-width:12ch}
.co-a__lede{margin:1.3rem 0 1.8rem;color:rgba(255,255,255,.8)!important;max-width:36ch}
.co-a__say .co-calls{max-width:520px}
.co-a__lines{margin-top:1.8rem;border-top:1px solid var(--line-dark);max-width:520px}
.co-a__lines li>*{display:flex;align-items:center;gap:.9rem;padding:.8rem 0;border-bottom:1px solid var(--line-dark);color:#fff;word-break:break-word}
.co-a__lines .ic{width:1.15rem;height:1.15rem;color:#ff8a8f;flex:0 0 auto}
.co-a__lines span span{display:grid;font-family:var(--f-disp);font-size:1.08rem;line-height:1.25}
.co-a__lines small{font-family:var(--f-sans);font-size:.6rem;letter-spacing:.16em;text-transform:uppercase;color:var(--on-dark-70)}
.co-a__lines a:hover{color:#ff8a8f}
.co-a__form{animation:co-rise 1.1s var(--e-out) backwards .15s}
@keyframes co-rise{from{opacity:0;transform:translate3d(0,40px,0)}}
.co-a__cap{position:absolute;z-index:1;left:var(--gut);bottom:1.1rem;margin:0;font-family:var(--f-it);font-style:italic;font-size:.85rem;color:var(--on-dark-50)}

/* ============================================================ B · the photo follows the job */
.co-b{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);background:#fff;align-items:start}
.co-b__media{position:sticky;top:0;height:100svh;overflow:hidden;background:var(--navy-2)}
.co-b__frame{position:absolute;inset:-6% -4%}
.co-b__fig{position:absolute;inset:0;margin:0;opacity:0;transition:opacity 1s var(--e-out)}
.co-b__fig img{transform:scale(1.07);transition:transform 2.4s var(--e-out)}
.co-b__fig.is-on{opacity:1}
.co-b__fig.is-on img{transform:none}
.co-b__scrim{position:absolute;inset:0;background:linear-gradient(0deg,rgba(10,9,52,.82) 0%,rgba(10,9,52,.1) 42%,rgba(10,9,52,0) 70%,rgba(10,9,52,.4) 100%)}
.co-b__capt{position:absolute;left:clamp(1.4rem,3vw,2.6rem);right:clamp(1.4rem,3vw,2.6rem);bottom:clamp(1.4rem,4vh,2.6rem);display:grid;gap:.4rem;transition:opacity .26s,transform .5s var(--e-out)}
.co-b__capt.is-swap{opacity:0;transform:translate3d(0,8px,0)}
.co-b__capt .lbl{color:#ff8a8f}
.co-b__capt b{font-family:var(--f-disp);font-weight:400;text-transform:uppercase;font-size:clamp(1.6rem,2.8vw,2.8rem);line-height:1;color:#fff;max-width:16ch}
.co-b__dcalls{position:absolute;left:clamp(1.4rem,3vw,2.6rem);right:clamp(1.4rem,3vw,2.6rem);top:calc(var(--hdr) + 1.4rem);display:grid;gap:.6rem;max-width:460px}
.opt-bar+.co-b .co-b__dcalls{top:1.8rem}
.co-b__dcalls .lbl{color:#fff;text-shadow:0 1px 8px rgba(0,0,0,.4)}
.co-b__side .co-b__calls{display:none}
.co-b__side{padding:calc(var(--hdr) + 1.6rem) clamp(1.4rem,4vw,4.2rem) 3rem;display:flex;flex-direction:column;gap:1.15rem;max-width:760px}
.opt-bar+.co-b .co-b__side{padding-top:2.2rem}
.co-b__head .lbl{color:var(--red);margin-bottom:.8rem}
.co-b__head h1{color:var(--navy)}
.co-b__form{box-shadow:none;padding:0;border-radius:0;background:none}
.co-b__jobs{border:0;margin:0;padding:1.1rem 0 0;border-top:1px solid var(--line);min-inline-size:0}
.co-b__jobs legend{padding:0;margin-bottom:.6rem;font-size:.68rem;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-70)}
.co-b__jobs legend small{letter-spacing:.04em;text-transform:none;color:var(--ink-50);margin-left:.4em}
.co-b__jobs>div{display:flex;flex-wrap:wrap;gap:.42rem}
.co-chip{position:relative;display:inline-flex;cursor:pointer}
.co-chip input{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none}
.co-chip span{display:inline-flex;align-items:center;border:1px solid var(--line);background:#fff;color:var(--navy);border-radius:999px;padding:.58em 1.05em;font-size:.9rem;font-weight:500;transition:background .3s,color .3s,border-color .3s}
.co-chip:hover span{border-color:var(--navy)}
.co-chip input:checked+span{background:var(--navy);border-color:var(--navy);color:#fff}
.co-chip input:focus-visible+span{outline:2px solid var(--red);outline-offset:3px}
.co-b__form .co-grid{margin-top:1rem}
.co-b__form .co-f input,.co-b__form .co-f textarea{background:var(--paper)}

/* ============================================================ C · a letter to Shawn */
.co-c{position:relative;background:var(--paper);padding-bottom:clamp(3.5rem,9vh,6rem)}
.co-c__hero{position:absolute;left:0;right:0;top:0;height:clamp(420px,64vh,640px);overflow:hidden;background:var(--navy-2)}
.co-c__ph{position:absolute;inset:-8% -4%}
.co-c__ph img{object-position:50% 40%;animation:co-push 2.4s var(--e-out) backwards}
.co-c__scrim{position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,9,52,.78) 0%,rgba(10,9,52,.3) 45%,rgba(10,9,52,.55) 100%)}
.co-c__top{position:relative;z-index:1;max-width:1240px;margin:0 auto;padding:calc(var(--hdr) + 2rem) var(--gut) 0;display:flex;justify-content:space-between;align-items:flex-end;gap:1rem 2rem;flex-wrap:wrap}
.opt-bar+.co-c .co-c__top{padding-top:2rem}
.co-c__top .lbl{color:#ff8a8f;margin-bottom:.8rem}
.co-c__cap{margin:0;font-family:var(--f-it);font-style:italic;font-size:.88rem;color:var(--on-dark-70)}
.co-c__mcalls{display:none}
.co-c__letter{position:relative;z-index:1;max-width:1180px;width:calc(100% - 2 * var(--gut));margin:1.4rem auto 0;display:grid;grid-template-columns:minmax(0,300px) minmax(0,1fr);background:#fff;border-radius:4px 4px 18px 18px;box-shadow:0 60px 110px -50px rgba(5,4,30,.7);animation:co-rise 1.1s var(--e-out) backwards .15s}
/* airmail edge */
.co-c__letter::before{content:"";position:absolute;left:0;right:0;top:0;height:7px;border-radius:4px 4px 0 0;background:repeating-linear-gradient(-45deg,var(--red) 0 12px,#fff 12px 20px,var(--navy) 20px 32px,#fff 32px 40px)}
.co-c__env{position:relative;padding:2.2rem 1.8rem 1.8rem;border-right:1px dashed rgba(16,15,75,.22);display:flex;flex-direction:column;gap:.55rem}
.co-c__stamp{align-self:flex-end;width:104px;padding:9px 9px 7px;background:#fff;border:1px dashed rgba(16,15,75,.35);box-shadow:0 0 0 5px #fff,0 0 0 6px rgba(16,15,75,.08),0 12px 20px -14px rgba(16,15,75,.6);transform:rotate(5deg);margin:-.4rem -.2rem .4rem 0}
.co-c__stamp img{width:100%;height:auto}
.co-c__env>.lbl{color:var(--red)}
.co-c__env address{font-style:normal;font-family:var(--f-it);font-style:italic;font-size:1.08rem;line-height:1.45;color:var(--navy)}
.co-c__env address b{display:block;font-family:var(--f-disp);font-style:normal;font-weight:400;text-transform:uppercase;font-size:1.5rem;line-height:1.05;margin-bottom:.2rem}
.co-c__or{margin:1.1rem 0 .2rem;padding-top:1rem;border-top:1px solid var(--line);font-size:.68rem;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-70)}
.co-c__env .co-calls{grid-template-columns:1fr}
.co-c__mail{display:inline-flex;align-items:center;gap:.5rem;margin-top:.4rem;font-size:.9rem;font-weight:500;color:var(--navy);word-break:break-all}
.co-c__mail .ic{color:var(--red)}
.co-c__mail:hover{color:var(--red)}
.co-c__form{box-shadow:none;border-radius:0 0 18px 0;padding:2.1rem clamp(1.4rem,3vw,2.4rem) 1.8rem}
.co-c__dear{margin:0;font-family:var(--f-it);font-style:italic;font-size:clamp(1.6rem,2.3vw,2.1rem);line-height:1.1;color:var(--navy)}
.co-c__next{list-style:none;max-width:1180px;width:calc(100% - 2 * var(--gut));margin:clamp(2.6rem,6vh,4rem) auto 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.4rem 2.4rem}
.co-c__next li{display:grid;grid-template-columns:auto 1fr;gap:1rem;border-top:2px solid var(--navy);padding-top:1.1rem}
.co-c__next span{font-family:var(--f-disp);font-size:1.6rem;line-height:1;color:var(--red)}
.co-c__next b{display:block;font-family:var(--f-disp);font-weight:400;text-transform:uppercase;font-size:1.3rem;line-height:1.1;color:var(--navy);margin-bottom:.4rem}
.co-c__next p{margin:0;font-size:.95rem;color:var(--ink-70)}

/* ============================================================ phones and small tablets */
@media (max-width:1100px){
  .co-c__letter{grid-template-columns:minmax(0,250px) minmax(0,1fr)}
  .co-grid--3{grid-template-columns:repeat(2,minmax(0,1fr))}
  .co-grid--3>.co-f,.co-grid--3>.co-f--sel,.co-grid--3>.co-f--sel+.co-f{grid-column:auto}
}
@media (max-width:899px){
  .co-form{border-radius:20px;padding:1.2rem 1.1rem 1.3rem}
  .co-grid,.co-grid--3{grid-template-columns:1fr;gap:.7rem;margin:.9rem 0 1rem}
  .co-calls{gap:.5rem}
  .co-call{padding:.7rem .75rem;gap:.55rem}
  .co-call .ic{width:2.1rem;height:2.1rem;padding:.5rem}
  .co-call span{font-size:.98rem}

  .co-a{min-height:0;justify-content:flex-start}
  .co-a__in{grid-template-columns:1fr;gap:1.4rem;padding:calc(var(--hdr) + 1.2rem) 1rem 2.4rem}
  .opt-bar+.co-a .co-a__in{padding-top:1.6rem}
  .co-a__scrim{background:linear-gradient(180deg,rgba(10,9,52,.86) 0%,rgba(10,9,52,.6) 40%,rgba(10,9,52,.85) 100%)}
  .co-a__lede{margin:1rem 0 1.3rem}
  .co-a__lines{display:none}
  .co-a__cap{position:relative;left:auto;bottom:auto;padding:0 1rem 1.2rem}

  .co-b{grid-template-columns:1fr}
  .co-b__media{position:relative;height:30svh;min-height:230px}
  .co-b__dcalls{display:none}
  .co-b__side .co-b__calls{display:grid}
  .co-b__capt{bottom:1rem;left:1rem;right:1rem;gap:.25rem}
  .co-b__capt b{font-size:1.2rem}
  .co-b__side{padding:1.4rem 1rem 2.4rem;gap:1rem}
  .opt-bar+.co-b .co-b__side{padding-top:1.4rem}
  .co-b__head h1{font-size:clamp(1.9rem,8.6vw,2.6rem)}

  .co-c__hero{height:340px}
  .co-c__top{padding:calc(var(--hdr) + 1.2rem) 1rem 0;display:block}
  .opt-bar+.co-c .co-c__top{padding-top:1.6rem}
  .co-c__cap{display:none}
  .co-c__mcalls{display:grid;margin-top:1.1rem}
  .co-c__letter{grid-template-columns:1fr;width:calc(100% - 2rem);margin-top:1.4rem}
  .co-c__form{order:-1;padding:1.6rem 1.1rem 1.3rem;border-radius:0}
  .co-c__env{border-right:0;border-top:1px dashed rgba(16,15,75,.22);padding:1.4rem 1.1rem 1.4rem}
  .co-c__env .co-calls{display:none}
  .co-c__or{display:none}
  .co-c__stamp{position:absolute;right:1.1rem;top:1.2rem;width:82px;margin:0}
  .co-c__next{grid-template-columns:1fr;width:calc(100% - 2rem)}
}
@media (prefers-reduced-motion:reduce){
  .co-a__ph img,.co-c__ph img,.co-a__form,.co-c__letter{animation:none}
}

/* round 4: phones show everything desktop shows */
@media (max-width:899px){ .co-a__lines{display:block!important} }