/* Work with David (design: work.html) */
/* Work-with-David — offer cards + process steps + booking frame */

/* Hero title/lede sizes come from the sitewide inner-page hero rule in main.css. */

/* --- the four things David does: own section, one row on desktop --- */
.offer{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;margin-block-start:1.5rem}
@media(max-width:1024px){.offer{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.offer{grid-template-columns:1fr}}
.offer li{position:relative;list-style:none;border:1px solid var(--line);border-radius:var(--radius);padding:1.2rem 1.4rem;background:var(--surface-2);overflow:hidden;
  transition:transform .3s cubic-bezier(.2,.7,.3,1),border-color .3s,background .3s}
/* Silver sheen sweeps in on hover — the liquid-silver motif, kept subtle. */
.offer li::before{content:"";position:absolute;inset:0;background:var(--silver);opacity:0;transition:opacity .3s;pointer-events:none}
.offer li:hover,.offer li:focus-within{transform:translateY(-4px);border-color:var(--accent);background:var(--surface)}
.offer li:hover::before,.offer li:focus-within::before{opacity:.07}
.offer li b{position:relative;font-family:var(--font-display);font-weight:500;font-size:1.15rem;display:block;margin-block-end:.35rem}
.offer li span{position:relative;display:block;color:var(--ink-soft);font-size:var(--step--1);line-height:1.5}
/* A rule that draws itself in from the leading edge on hover. */
.offer li::after{content:"";position:absolute;inset-inline-start:0;inset-block-end:0;height:2px;width:0;background:var(--accent);transition:width .35s cubic-bezier(.2,.7,.3,1)}
.offer li:hover::after,.offer li:focus-within::after{width:100%}

/* --- how it works --- */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin-block:1.5rem}
@media(max-width:768px){.steps{grid-template-columns:1fr}}
.step{border:1px solid var(--line);border-radius:var(--radius);padding:1.5rem;background:var(--surface);
  transition:transform .3s cubic-bezier(.2,.7,.3,1),border-color .3s,background .3s}
.step:hover,.step:focus-visible{transform:translateY(-4px);border-color:var(--accent);background:var(--surface-2)}
.step:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.step .n{font-family:var(--font-display);font-size:1.4rem;color:var(--ink-faint);transition:color .3s,transform .3s}
.step:hover .n,.step:focus-visible .n{color:var(--accent);transform:translateY(-2px)}
.step h3{font-family:var(--font-display);font-weight:500;font-size:1.2rem;margin-block:.5rem .4rem}
.step p{color:var(--ink-soft);font-size:var(--step--1)}

/* --- booking --- */
.bookframe{border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);min-height:320px;display:grid;place-items:center;text-align:center;color:var(--ink-faint);position:relative;overflow:hidden;margin-block-start:1.5rem}
.bookframe::before{content:"";position:absolute;inset:0;background:var(--silver);opacity:.06}
.bookframe .inner{position:relative;padding:2rem}
.bookframe iframe{position:relative;display:block;border-radius:var(--radius)}

@media(prefers-reduced-motion:reduce){
  .offer li,.step,.step .n{transition:none}
  .offer li:hover,.offer li:focus-within,.step:hover,.step:focus-visible{transform:none}
  .offer li::after{transition:none}
}