/* page-work2.css: Our work page (study 07 design language) */

body{
  background:var(--cream);color:var(--teal);
  font-family:'DM Sans',sans-serif;font-size:17px;line-height:1.65;
  overflow-x:hidden;
}
body::after{
  content:"";position:fixed;inset:0;z-index:99;pointer-events:none;opacity:.4;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 300 300' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='p'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0.11 0 0 0 0 0.28 0 0 0 0 0.35 0 0 0 0.03 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23p)'/%3E%3C/svg%3E");
}
section{padding:clamp(62px,9vh,108px) 0}

/* The portrait cut puts the van and mascot low in the frame, so a centred crop buries
   them behind the headline. Bias the focal point down to keep them clear of the fade.
   Desktop is unaffected: the 21:9 cut renders under the height cap, so it never crops. */
#work-hero{--hero-pos:50% 88%}

/* ---------- job dockets ---------- */
/* Symmetric vertical padding: the divider needs the same air under the docket above it
   as over the one below, or the rule reads as if it belongs to the next job. */
.job{padding:clamp(44px,6vh,68px) 0}
.job + .job{border-top:1.5px solid var(--teal-faint)}
/* Explicit .flip rather than :nth-child, because the dockets share a .wrap with the
   section heading and any new element above would silently reverse every row. */
.job.flip .spread{direction:rtl}
.job.flip .spread > *{direction:ltr}

.job-head{
  display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;margin-bottom:32px;
}
.job-no{
  font-family:'Teko',sans-serif;font-weight:600;font-size:clamp(38px,5vw,58px);
  line-height:.9;color:var(--marigold);letter-spacing:.02em;
}
.job-where{
  font-family:'Teko',sans-serif;font-weight:600;font-size:clamp(26px,3.4vw,38px);
  letter-spacing:.08em;text-transform:uppercase;color:var(--teal);line-height:1;
}
.job-meta{
  display:flex;gap:8px 18px;flex-wrap:wrap;margin-left:auto;
  font-family:'Teko',sans-serif;font-weight:500;font-size:15.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--teal-soft);
}
.job-meta span{white-space:nowrap}
.job-meta span + span::before{content:"·";margin-right:18px;color:var(--marigold)}
@media(max-width:700px){
  .job-head{gap:8px}
  .job-meta{margin-left:0;width:100%;font-size:14px;letter-spacing:.12em}
}

/* the headline result, when there is a real measured one */
.job-result{
  margin-top:28px;padding:18px 22px 15px;border-radius:10px;
  background:var(--marigold);color:var(--teal);
}
.job-result b{display:block;font-family:'Teko',sans-serif;font-weight:600;font-size:30px;line-height:1;letter-spacing:.04em}
.job-result span{display:block;margin-top:4px;font-size:14.5px;line-height:1.5}

/* the plain-english note under a docket */
.job-note{
  margin-top:26px;padding-left:18px;border-left:3px solid var(--rust);
  font-size:15.5px;color:var(--teal-soft);
}

/* ---------- second photo under the main plate ---------- */
/* Fixed ratios rather than natural height: the job photos are a mix of portrait and
   landscape phone shots, and aspect-ratio also reserves the space before the lazy
   image lands, so the docket doesn't collapse and jump as you scroll past. */
.plate-pair{display:grid;gap:14px}
.plate-pair .plate-art img{width:100%;object-fit:cover}
.plate-pair .plate-art:first-child img{aspect-ratio:4/3}
.plate-pair .plate-art:last-child img{aspect-ratio:16/10}

/* ---------- honesty note ---------- */
#roll{overflow:hidden;padding-bottom:60px}
#roll .reel-shell{margin-top:44px}

@media(max-width:760px){
  section{padding:clamp(52px,7vh,78px) 0}
  .sec-sub{padding:0 6px}
  .spread{margin-top:44px}
  .job.flip .spread{direction:ltr}
  .hero-copy{margin-top:-56px}
  .hero-copy h1{font-size:clamp(34px,10vw,50px)}
}

/* ---------- the rest of the book: filter + card grid ---------- */
.jfilter{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:42px}
.jfbtn{
  cursor:pointer;border:1.5px solid var(--teal-faint);background:transparent;color:var(--teal-soft);
  font-family:'Teko',sans-serif;font-weight:500;font-size:16px;letter-spacing:.16em;text-transform:uppercase;
  padding:9px 20px 6px;border-radius:30px;transition:background .2s,color .2s,border-color .2s;
}
.jfbtn:hover{border-color:var(--marigold);color:var(--teal)}
.jfbtn.on{background:var(--marigold);border-color:var(--marigold);color:var(--teal)}

.jgrid{
  margin-top:40px;display:grid;gap:22px;
  grid-template-columns:repeat(auto-fill,minmax(290px,1fr));
  align-items:start;
}
.jempty{margin-top:30px;text-align:center;color:var(--teal-soft)}

.jcard{
  background:#fff;border:1.5px solid var(--teal-faint);border-radius:14px;overflow:hidden;
  transition:box-shadow .3s,transform .3s;
}
.jcard:hover{box-shadow:0 14px 32px rgba(28,72,90,.13)}
.jcard.hide{display:none}

/* the whole card head is the control, so the hit area is the card not a small link */
.jcard-top{
  display:block;width:100%;padding:0;border:0;background:transparent;cursor:pointer;text-align:left;
  font:inherit;color:inherit;
}
.jcard-shot{display:block;overflow:hidden}
.jcard-shot img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover;transition:transform .5s}
.jcard-top:hover .jcard-shot img{transform:scale(1.04)}
.jcard-txt{display:block;padding:20px 22px 6px}
.jcard-where{
  display:block;font-family:'Teko',sans-serif;font-weight:600;font-size:26px;line-height:1;
  letter-spacing:.07em;text-transform:uppercase;color:var(--teal);
}
.jcard-spec{
  display:block;margin-top:9px;font-family:'Teko',sans-serif;font-weight:500;font-size:17px;
  letter-spacing:.1em;color:var(--rust);
}
.jcard-type{display:block;margin-top:9px;font-size:14px;color:var(--teal-soft)}
.jcard-more{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  margin:16px 22px 20px;padding-top:14px;border-top:1.5px solid var(--teal-faint);
  font-family:'Teko',sans-serif;font-weight:500;font-size:15px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--teal-soft);
}
.jcard-more i{
  position:relative;width:20px;height:20px;border-radius:50%;background:var(--marigold);flex:0 0 auto;
}
.jcard-more i::before,.jcard-more i::after{
  content:"";position:absolute;left:50%;top:50%;width:9px;height:1.8px;background:var(--teal);
  transform:translate(-50%,-50%);transition:transform .3s;
}
.jcard-more i::after{transform:translate(-50%,-50%) rotate(90deg)}
.jcard.open .jcard-more i::after{transform:translate(-50%,-50%) rotate(0)}
.jcard.open .jcard-more{color:var(--teal)}

/* an open card takes the full row so the two-column spread has room to breathe */
.jcard.open{grid-column:1/-1;box-shadow:0 18px 40px rgba(28,72,90,.16)}
.jcard.open .jcard-shot{display:none}
.jcard-open{padding:0 clamp(18px,2.4vw,30px) 30px}
.jcard-open .spread{margin-top:8px}
.jcard-open .art-side,.jcard-open .copy-side{opacity:1;transform:none}

@media(max-width:760px){
  .jgrid{grid-template-columns:1fr;gap:18px}
  .jfilter{gap:8px}
  .jfbtn{font-size:15px;padding:8px 16px 5px;letter-spacing:.12em}
  .jcard.open .jcard-shot{display:block}
}

/* A projected figure is marked so it reads differently from a metered one.
   NB: named .result-stamp / .projected, never .est: style.css:261 already owns .est
   as the big teal estimate section, and a bare .est here inherits its padding. */
.job-result.projected{background:transparent;border:2px dashed var(--marigold);padding:14px 18px 13px}
.job-result.projected b{display:inline}
.result-stamp{
  display:inline-block;margin-left:10px;vertical-align:5px;
  font-family:'Teko',sans-serif;font-style:normal;font-weight:500;font-size:12.5px;
  letter-spacing:.16em;text-transform:uppercase;color:var(--rust);
  border:1.5px solid var(--rust);border-radius:20px;padding:3px 10px 1px;white-space:nowrap;
}
@media(max-width:520px){.result-stamp{margin:6px 0 0;vertical-align:0;display:block;width:max-content}}