/* Mesh Labz – Work with me page. Builds on clonr.css (.c-section, .c-head, .pillars). */

/* ---------- Shared intro ---------- */
.w-hero { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(28px, 5vw, 72px); align-items: center; }
.w-hero .tag { border-radius: 999px; padding: .6em 1.1em; color: #cfe6f7; border-color: rgba(26, 155, 230, .45); background: rgba(26, 155, 230, .08); }
.w-hero h1 { margin: 1.2rem 0 .6rem; font: 700 clamp(2.8rem, 5vw, 4.8rem)/.92 var(--f-head); letter-spacing: -0.05em; }
.w-hero .lede { font-size: 1.12rem; margin: 1rem 0 1.6rem; max-width: 34ch; color: #c9d4de; }
.w-hero .row { display: flex; gap: 10px; flex-wrap: wrap; }
.w-hero .row .btn { min-width: 190px; }
.w-hero-art { position: relative; }
.w-hero { overflow-x: clip; overflow-y: visible; }
.w-hero-art::before { content: ""; position: absolute; inset: -12% -8%; z-index: -1; background: radial-gradient(50% 50% at 50% 50%, rgba(26,155,230,.25), rgba(0,0,0,0) 70%); }
.w-hero-art img { width: 100%; aspect-ratio: 4 / 3.3; object-fit: cover; border-radius: var(--r-lg); box-shadow: 0 40px 80px rgba(0,0,0,.5), 0 0 0 1px rgba(255,255,255,.06); }
@media (max-width: 860px) { .w-hero { grid-template-columns: 1fr; } }
.w-hero-solo { grid-template-columns: 1fr; gap: 0; }   /* text only, steps underneath (Artists Network) */
.w-hero-solo .lede { max-width: 62ch; }
.w-hero-solo .solo-steps { margin-top: 0; }   /* the last intro line's bottom margin gives one line of space */

/* ---------- Services: image cards ---------- */
.services { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 14px; }
.service { grid-column: span 2; border-radius: var(--r-lg); overflow: hidden; background: var(--field); border: 1px solid var(--line); display: flex; flex-direction: column; }
.service.s-wide { grid-column: span 4; }
.service img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; transition: transform 1s cubic-bezier(.22,1,.36,1); }
.service.s-wide img { aspect-ratio: auto; height: 100%; min-height: 0; flex: 1; }
.service.s-wide { display: grid; grid-template-rows: minmax(0, 1fr) auto; }
.service.s-art img { object-fit: contain; object-position: center bottom; background: radial-gradient(60% 60% at 50% 55%, rgba(26,155,230,.22), rgba(0,0,0,0) 70%), #080b10; }
.service:hover img { transform: scale(1.03); }
.service .txt { padding: 1.2rem 1.4rem 1.4rem; }
.service .txt .mono { color: var(--bright); }
.service h3 { margin: .35rem 0 .4rem; font: 700 1.25rem/1.15 var(--f-head); }
.service p { margin: 0; color: #c3ced9; }
.service.s-wide, .service.s-art { min-height: 460px; }
.service.s-art img { flex: 1; aspect-ratio: auto; min-height: 0; height: 300px; }
@media (max-width: 960px) {
  .services { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .service, .service.s-wide { grid-column: span 1; }
  .service.s-wide { grid-column: span 2; }
}
@media (max-width: 600px) {
  .services { grid-template-columns: 1fr; }
  .service.s-wide { grid-column: span 1; }
  .service.s-wide, .service.s-art { min-height: 0; }
  .service.s-wide img { aspect-ratio: 16 / 10; height: auto; }
}

/* ---------- Process ---------- */
.process { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; counter-reset: p; }
.process li { counter-increment: p; position: relative; padding: 1.5rem 1.4rem 1.6rem; border-radius: var(--r-md); background: var(--field); border: 1px solid var(--line); }
.process li::before { content: "0" counter(p); display: block; font: 700 2.4rem/1 var(--f-head); letter-spacing: -0.03em; color: transparent; -webkit-text-stroke: 1px rgba(26,155,230,.7); margin-bottom: 1.1rem; }
.process h3 { margin: 0 0 .45rem; font: 700 1.15rem/1.2 var(--f-head); }
.process p { margin: 0; color: #c3ced9; }
@media (max-width: 960px) { .process { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .process { grid-template-columns: 1fr; } }

/* ---------- Enquiry form ---------- */
.enquire { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: clamp(24px, 4vw, 56px); padding: clamp(24px, 4vw, 48px); border-radius: var(--r-lg);
  background: radial-gradient(80% 90% at 0% 0%, rgba(26,155,230,.16), rgba(26,155,230,0) 55%), #0b1016; border: 1px solid var(--line); }
.enquire .eyebrow { display: block; color: var(--bright); margin-bottom: .8rem; }
.enquire h2 { margin: 0 0 .8rem; font: 700 clamp(1.9rem, 3.6vw, 2.8rem)/1.05 var(--f-head); letter-spacing: -0.03em; }
.enquire-intro p { margin: 0 0 1rem; color: #c3ced9; }
.enquire .direct { color: var(--muted); }
.enquire .direct a { color: var(--text); text-decoration: underline; text-underline-offset: 3px; }
.enquiry-form { display: grid; gap: 14px; }
.f-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.enquiry-form label { display: grid; gap: .45rem; color: #cfd9e2; font-size: .93rem; font-weight: 500; }
.enquiry-form .opt { color: var(--muted); font-weight: 400; font-size: .85em; margin-left: .3rem; }
.work-page #enquire { padding-bottom: clamp(72px, 10vw, 120px); }
.enquiry-form input, .enquiry-form select, .enquiry-form textarea {
  width: 100%; padding: .85rem 1rem; border-radius: var(--r-sm); border: 1px solid var(--line); background: #0d141c; color: var(--text);
  font: 400 1rem/1.4 var(--f-body); transition: border-color .2s; }
.enquiry-form textarea { resize: vertical; min-height: 140px; }
.enquiry-form select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%);
  background-position: calc(100% - 20px) 55%, calc(100% - 14px) 55%; background-size: 6px 6px; background-repeat: no-repeat; padding-right: 2.4rem; }
.enquiry-form input::placeholder, .enquiry-form textarea::placeholder { color: #5f6b77; }
.enquiry-form input:focus, .enquiry-form select:focus, .enquiry-form textarea:focus { outline: none; border-color: var(--bright); }
.f-foot { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; margin-top: .3rem; }
.f-foot .btn { min-width: 200px; }
.f-note { color: var(--muted); font-size: .9rem; }
.f-error { margin: 0; color: #ff9aa5; font-size: .93rem; }
@media (max-width: 860px) { .enquire { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .f-row { grid-template-columns: 1fr; } }

/* ---------- Artists page ---------- */
.skills > div { padding: 1.5rem 1.4rem 1.6rem; border-radius: var(--r-md); background: linear-gradient(180deg, rgba(26,155,230,.07), rgba(26,155,230,0) 60%), var(--field); border: 1px solid var(--line); }
.skills h3 { margin: 0 0 .45rem; font: 700 1.15rem/1.2 var(--f-head); }
.skills p { margin: 0; color: #c3ced9; }
.artists-page .skills + .notes { margin-top: 12px; }
.artists-page #apply { padding-bottom: clamp(72px, 10vw, 120px); }

/* Experience line under the Work with me intro */
.creds { list-style: none; margin: 1.6rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.creds li { padding: .45rem .8rem; border-radius: 999px; border: 1px solid var(--line); color: #cfd9e2; font-size: .85rem; }

/* Work with me intro photo is portrait */
.w-hero-art img.me { height: auto; aspect-ratio: auto; object-position: center 60%; }   /* show the whole desk photo */

/* Work with me: text sits closer to the desk photo, enquiry card pulled up */
.w-hero-work { gap: clamp(24px, 3vw, 40px); }
.w-hero-work .lede { max-width: 46ch; }
.enquire-close { padding-top: clamp(48px, 6vw, 80px); }
.w-hero h1 em { font-style: normal; color: var(--bright); }   /* like Zubin on About */