/* ov-index — homepage "overlapping images" pass (2026-09-30). Page-scoped: only index.html links it
   (front matter `css: la d29 d29-index hero-c ov-index`). Copy untouched; layout and pictures only.
   Moments: hero photo with a sand block running off the right edge and a real FineShield guidance card
   over its corner · #paths photos standing out of the card tops · #expertise photo on a
   sand block that bleeds off the left edge, a real lawyer-review crop floating over its corner · the four
   FineShield steps as a card rising over the general-counsel photo, bleeding off the right edge · the
   dashboard lifted over a full-width ink band · films side by side, top-aligned, a sand block behind the first · a two-photo
   collage under the questions heading · the application form floating over a photo that runs off the
   right edge of the closing card. */

.d29{overflow-x:clip;--ov-sand:#E9DFCC;--ov-ink:#0C1A24;
  --ov-shadow:0 0 0 1px rgba(0,0,0,.05),0 30px 60px -24px rgba(30,22,10,.35),0 12px 24px -12px rgba(30,22,10,.18)}
.d29 .ov-card{display:block;width:100%;height:auto;border-radius:12px;background:#fff;box-shadow:var(--ov-shadow)}
.d29 picture[class*="ov-"]{display:block}

/* ---------- hero: sand block off the right edge; a FineShield guidance card over the photo's lower-left corner ---------- */
.d29 .ov-hero-m{position:relative;isolation:isolate}
.d29 .ov-hero-m::before{content:"";position:absolute;z-index:-1;top:2.25rem;bottom:-2.25rem;left:28%;right:calc(-1 * var(--gutter) - 50vw);border-radius:var(--radius-img) 0 0 var(--radius-img);background:var(--ov-sand)}
.d29 .ov-hero-m .ov-float{position:absolute;z-index:2;width:min(15.5rem,40%);left:-3.5rem;bottom:-3rem}
.d29 .ov-hero-m .ov-card{padding:.7rem .8rem;border-radius:14px}
@media (prefers-reduced-motion:no-preference){
  .d29 .ov-hero-m .ov-float{animation:ov-rise .9s var(--ease) .45s both}
  @keyframes ov-rise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
}

/* ---------- #paths: each card carries a photo that stands out of its top edge; the second card steps down ---------- */
.d29 #paths .hp-paths{padding-top:3.5rem;align-items:start}
.d29 #paths .ov-path{overflow:visible}
.d29 #paths .ov-path-p{margin:-5.5rem 0 .75rem;position:relative}
.d29 #paths .ov-path-p img{width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;border-radius:12px;box-shadow:var(--ov-shadow);filter:sepia(.1) saturate(.85) contrast(.97) brightness(1.03)}
.d29 #paths .ov-path-a .ov-path-p{margin-left:-2.5rem;margin-right:2rem}
.d29 #paths .ov-path-b .ov-path-p{margin-right:-2.5rem;margin-left:2rem}
.d29 #paths .ov-path-b .ov-path-p img{object-position:50% 40%}
@media (min-width:961px){
  .d29 #paths .hp-paths{align-items:stretch}   /* the two cards share one top line (founder 0930) */
}

/* ---------- #expertise: sand block off the left edge behind the photo; a real AnswerLoop review crop over its corner ---------- */
.d29 .ov-exp-m{position:relative;isolation:isolate}
.d29 .ov-exp-m::before{content:"";position:absolute;z-index:-1;top:14%;bottom:-2.5rem;right:22%;left:calc(-1 * var(--gutter) - 50vw);border-radius:0 var(--radius-img) var(--radius-img) 0;background:var(--ov-sand)}
.d29 .ov-exp-m .ov-exp-float{position:absolute;z-index:2;width:min(27rem,72%);right:-4.5rem;bottom:2.5rem}
.d29 .ov-exp-m .ov-card{padding:.5rem .6rem;border-radius:12px}
.d29 #expertise .hp-figpanel{margin-top:calc(var(--stack-l) + 2.5rem)}
@media (prefers-reduced-motion:no-preference){
  .d29.d29-anim .ov-exp-m .ov-exp-float{opacity:0;transform:translateX(24px);transition:opacity .7s var(--ease) .25s,transform .7s var(--ease) .25s}
  .d29.d29-anim .ov-exp-m.in .ov-exp-float{opacity:1;transform:none}
}

/* ---------- photo band + #controls: the steps rise over the photo as a card that runs off the right edge ---------- */
.d29 .hp-bleed .bleed-fig .bleed{height:clamp(22rem,44vw,38rem)}
.d29 #controls{padding-top:0;position:relative}
.d29 #controls .ov-ctl-card{position:relative;z-index:1;margin-top:clamp(-11rem,-9vw,-5rem);margin-left:clamp(0rem,5vw,6rem);margin-right:calc(-1 * var(--gutter) - max(0px,(100vw - var(--max) - 2 * var(--gutter)) / 2));
  background:var(--surface);border-radius:calc(var(--radius) + 6px) 0 0 calc(var(--radius) + 6px);box-shadow:var(--ov-shadow);
  padding:clamp(2rem,1rem + 3vw,4rem) calc(var(--gutter) + max(0px,(100vw - var(--max) - 2 * var(--gutter)) / 2)) clamp(2rem,1rem + 3vw,3.5rem) clamp(1.5rem,1rem + 3vw,4rem)}
.d29 #controls .ov-ctl-card .head{margin-bottom:var(--stack-m)}
.d29 #controls .ov-ctl-card .head::before{content:"";display:block;width:3rem;height:3px;border-radius:2px;background:var(--accent);margin-bottom:1.25rem;opacity:.85}

/* the dashboard lifted over a full-width ink band */
.d29 #controls .ov-dash{position:relative;isolation:isolate;background:none;padding:0;margin-top:calc(var(--stack-l) + 2rem)}
.d29 #controls .ov-dash::before{content:"";position:absolute;z-index:-1;top:16%;bottom:24%;left:calc(50% - 50vw);right:calc(50% - 50vw);background:var(--ov-ink)}
.d29 #controls .ov-dash::after{content:"";position:absolute;z-index:-1;top:calc(16% - 1px);left:calc(50% - 50vw);width:38vw;height:3px;background:#F59E0B;opacity:.9}
.d29 #controls .ov-dash .d29-shot{width:min(100%,72rem);margin-inline:auto;display:block;border-radius:12px;box-shadow:0 0 0 1px rgba(255,255,255,.06),0 40px 80px -30px rgba(0,0,0,.55),0 14px 30px -14px rgba(0,0,0,.35)}
.d29 #controls .ov-dash figcaption{margin-top:1.25rem}

/* ---------- #see-it-work: the two films step, over a sand block that runs off the left edge ---------- */
.d29 .ov-films{position:relative;isolation:isolate}
/* the sand block sits behind the first film's picture only, so it never reaches the headings below */
.d29 .ov-films .hp-film:first-child .hp-film-m::before{content:"";position:absolute;z-index:-1;top:16%;bottom:16%;left:-100vw;right:-14%;border-radius:0 var(--radius-img) var(--radius-img) 0;background:var(--ov-sand);pointer-events:none}
.d29 .ov-films .hp-film-m{background:var(--surface);box-shadow:var(--ov-shadow)}
@media (min-width:961px){
  .d29 .ov-films{align-items:start;column-gap:clamp(2rem,1rem + 3vw,4.5rem)}
}

/* ---------- #questions: a portrait under the heading (the paper square was removed, founder 2026-10-05) ---------- */
.d29 .ov-faq-col{position:relative;margin-top:var(--stack-l);max-width:24rem}
.d29 .ov-faq-a img{width:82%;height:auto;aspect-ratio:4/5;object-fit:cover;border-radius:var(--radius-img);filter:sepia(.1) saturate(.85) contrast(.97) brightness(1.03)}
@media (min-width:961px){.d29 #questions .ov-faq-t{position:sticky;top:7rem}}

/* ---------- close: the application form floats over a photo that runs off the right edge ---------- */
.d29 .ov-close{position:relative;isolation:isolate;overflow:visible}
.d29 .ov-close-p{position:absolute;z-index:0;top:-3rem;bottom:-3rem;left:62%;right:calc(50% - 50vw)}
.d29 .ov-close-p img{width:100%;height:100%;object-fit:cover;object-position:50% 50%;border-radius:var(--radius-img) 0 0 var(--radius-img);filter:sepia(.1) saturate(.85) contrast(.97) brightness(1.03)}
.d29 .ov-close .hp-close-g{position:relative;z-index:1}
.d29 .ov-close .hp-apply{box-shadow:var(--ov-shadow);border:0}
.d29 #signup{padding-block:calc(var(--section) + 1rem)}

/* ---------- responsive ---------- */
@media (max-width:1180px) and (min-width:961px){
  .d29 .ov-hero-m .ov-float{width:min(13rem,42%);left:-2.5rem}
}
@media (max-width:960px){
  .d29 .ov-hero-m::before{top:1.5rem;bottom:-1.5rem;left:30%}
  .d29 .ov-hero-m .ov-float{width:min(13rem,42%);left:.75rem;bottom:-2.5rem}
  .d29 .d29-hero{padding-bottom:calc(var(--section) + 1.5rem)}
  .d29 #paths .hp-paths{row-gap:calc(var(--stack-l) + 3.5rem);max-width:34rem}
  .d29 .ov-exp-m{margin-bottom:5rem}
  .d29 .ov-exp-m .ov-exp-float{width:min(27rem,82%);right:-.5rem;bottom:-4rem}
  .d29 .ov-exp-m::before{bottom:-1.5rem;right:30%}
  .d29 #controls .ov-ctl-card{margin-left:0;margin-top:-4rem}
  .d29 .ov-faq-col{max-width:22rem}
  .d29 .ov-close-p{position:relative;display:block;top:auto;bottom:auto;left:auto;right:auto;margin:calc(-1 * clamp(2rem,1rem + 5vw,6rem) - 2.5rem) calc(-1 * clamp(1.25rem,.5rem + 4vw,5rem) - var(--gutter)) var(--stack-m) 18%}
  .d29 .ov-close-p img{height:auto;aspect-ratio:3/2}
  .d29 #signup{padding-top:calc(var(--section) + 2.5rem)}
}
@media (max-width:700px){
  .d29 #paths .ov-path-p{margin-top:-4rem}
  .d29 #paths .ov-path-a .ov-path-p{margin-left:-.75rem;margin-right:1.5rem}
  .d29 #paths .ov-path-b .ov-path-p{margin-right:-.75rem;margin-left:1.5rem}
  .d29 #controls .ov-ctl-card{margin-top:-3rem;padding-left:1.25rem}
  .d29 #controls .ov-dash::before{top:10%;bottom:18%}
  .d29 .ov-faq-col{margin-top:var(--stack-m);max-width:20rem}
}
@media (prefers-reduced-motion:reduce){
  .d29 .ov-hero-m .ov-float,.d29 .ov-exp-m .ov-exp-float{animation:none;transition:none;opacity:1;transform:none}
}