/* Editorial design pass. Physical disorder gives way to focused casework. */

/* Keep the contact action anchored to the true centre of the footer. */
footer { grid-template-columns: 1fr auto 1fr; }
.footer-contact { justify-self: center; text-align: center; }
footer p:last-child { justify-self: end; }

/* Each corner is isolated before it is positioned. This avoids a visible split through the source image. */
.hero-corner-object {
  position: absolute;
  z-index: 1;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
  user-select: none;
  filter: saturate(.92) contrast(1.03);
}
.hero-object-seal {
  clip-path: polygon(0 0, 30% 0, 30% 42%, 0 42%);
  transform: translateY(-3%);
}
.hero-object-gavel { clip-path: polygon(64% 0, 100% 0, 100% 40%, 64% 40%); }
.hero-object-files {
  clip-path: polygon(88% 41.5%, 100% 41.5%, 100% 100%, 74% 100%, 79% 66%, 82% 50%, 85% 44%);
  transform: scaleX(-1);
}
.hero-object-pen {
  clip-path: polygon(0 61%, 36% 61%, 36% 96%, 0 96%);
  transform: scaleX(-1);
}

/* The annotation should feel like it was made quickly with a real pen. */
.case-sheet-before .margin-note {
  z-index: 6;
  top: 34%;
  left: -104px;
  width: 245px;
  font-size: clamp(38px, 3.3vw, 52px);
  line-height: .92;
  letter-spacing: -.025em;
  transform: rotate(-8deg);
  text-shadow: 0 1px 0 #fff8;
}
.admin-mark-line,
.admin-mark-ghost {
  fill: none;
  stroke: #315e42;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.admin-mark-line { stroke-width: 1.35; opacity: .82; }
.admin-mark-ghost { stroke-width: .65; opacity: .28; transform: translate(1.5px, -1px); }
.motion-ready .admin-mark-ghost { stroke-dasharray: 1; stroke-dashoffset: 1; }
.motion-ready .is-annotated .admin-mark-ghost { animation: draw-pencil 1.12s .08s ease forwards; }

/* Restore the simple before and after comparison. */
.after-scene { grid-template-columns: minmax(0,1fr) 160px; max-width: 1460px; }
.case-sheet-after { max-width: 1180px; }
.case-sheet-after .case-sheet-paper { padding: 42px 46px 34px; overflow: hidden; }
.case-sheet-after h2 { margin-bottom: 24px; }
.case-shift {
  display: grid;
  grid-template-columns: minmax(270px, .9fr) 110px minmax(360px, 1.25fr);
  gap: 28px;
  align-items: center;
  min-height: 430px;
}
.case-shift-list { margin: 0; padding: 0; list-style: none; border-bottom: 1px solid #d3d1c8; }
.case-shift-list li {
  display: grid;
  grid-template-columns: 34px 1fr;
  align-items: center;
  min-height: 69px;
  border-top: 1px solid #d3d1c8;
}
.case-shift-list li > span { color: #9b9d94; font-size: 9px; letter-spacing: .12em; }
.case-shift-list strong {
  position: relative;
  width: fit-content;
  color: #777b72;
  font: 400 28px/1.1 'Instrument Serif', serif;
}
.case-shift-list strong::after {
  content: '';
  position: absolute;
  left: -2%;
  right: -5%;
  top: 54%;
  height: 1px;
  background: #8b9e87;
  transform: rotate(-1deg);
}
.case-shift-arrow { color: #37694b; text-align: center; transform: rotate(-2deg); }
.case-shift-arrow span { display: block; margin-bottom: 4px; font: 22px/1 'Caveat', cursive; }
.case-shift-arrow svg { display: block; width: 100%; overflow: visible; }
.case-shift-arrow path { fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.case-ready {
  margin: 0;
  color: #1e5138;
  font: 400 clamp(32px, 2.8vw, 43px)/1.02 'Instrument Serif', serif;
  letter-spacing: -.035em;
}
.case-sheet-after .sheet-footnote { margin: 22px 0 0 34px; color: #285e43; font: 29px/1.1 'Caveat', cursive; }

/* The final matter map stays precise, while the language remains plain. */
.case-journey { position:relative; padding-block:130px 150px; color:#eaf2e9; background:#101713; overflow:hidden; }
.case-journey::before { content:''; position:absolute; inset:0; opacity:.55; background:radial-gradient(circle at 50% 52%,#244c346e,transparent 38%),linear-gradient(#9cc6a00b 1px,transparent 1px),linear-gradient(90deg,#9cc6a00b 1px,transparent 1px); background-size:auto,32px 32px,32px 32px; }
.journey-heading { position:relative; z-index:2; max-width:1040px; margin:auto; text-align:center; }
.map-topbar i { width:7px; height:7px; border-radius:50%; background:#83d08d; box-shadow:0 0 0 5px #83d08d18,0 0 18px #83d08d; }
.case-journey .journey-heading h2 { margin:0; color:#f1f3e9; }
.journey-heading > p { max-width:780px; margin:28px auto 0; color:#9faea2; font-size:18px; line-height:1.6; }
.case-map { grid-template-areas:'one two three' 'signature five four'; padding:104px 46px 46px; border-color:#48604f; background:linear-gradient(#c7e0cb0d 1px,transparent 1px),linear-gradient(90deg,#c7e0cb0d 1px,transparent 1px),#131d17; background-size:36px 36px; box-shadow:0 50px 120px #0008,inset 0 0 90px #294f3214; }
.map-topbar { position:absolute; z-index:3; top:0; left:0; right:0; display:flex; justify-content:space-between; align-items:center; height:58px; padding:0 20px; border-bottom:1px solid #405348; color:#829489; background:#0d130f; font:600 9px/1 'Manrope',sans-serif; letter-spacing:.13em; }
.map-topbar span:last-child { display:flex; align-items:center; gap:10px; color:#a9cdb0; }
.map-node { min-height:240px; padding:22px; border-color:#3b5041; color:#eaf1e8; background:linear-gradient(145deg,#203127,#162019 70%); box-shadow:0 16px 30px #0005,inset 0 1px #b9d2bd10; }
.map-node::before { content:''; position:absolute; inset:6px; border:1px solid #b9d2bd08; pointer-events:none; }
.map-node > span { color:#7f9585; letter-spacing:.14em; }
.map-node > em { position:absolute; top:20px; right:20px; color:#87bd90; font:600 8px/1 'Manrope',sans-serif; letter-spacing:.14em; }
.map-node h3 { color:#f0f3e9; font-size:30px; }
.map-node p { color:#9baaa0; }
.map-node small { position:absolute; left:22px; right:22px; bottom:20px; padding-top:13px; border-top:1px solid #34463a; color:#74867b; font:9px/1 'Manrope',sans-serif; letter-spacing:.12em; text-transform:uppercase; }
.map-five { border-color:#6b9f74; background:linear-gradient(145deg,#284a34,#183122 70%); box-shadow:0 0 0 1px #78bd8250,0 24px 45px #0007,0 0 55px #4a8a5623; }
.map-signature { color:#cfe1cf; }
.map-signature > span { display:block; margin-bottom:16px; color:#718479; font-size:9px; letter-spacing:.15em; }
.map-signature strong { color:#e8f1e4; font-size:54px; }
.map-signature p { color:#92ad97; font:italic 18px/1.25 'Instrument Serif',serif; }
.map-route { stroke:#74aa7c; stroke-width:1.15; filter:drop-shadow(0 0 4px #70b57999); }
.map-route-return { opacity:.4; }
@media (max-width:1100px) {
  .case-sheet-before .margin-note { left:-72px; width:205px; font-size:40px; }
  .case-shift { grid-template-columns:minmax(240px,.9fr) 88px minmax(310px,1.2fr); gap:20px; }
}

@media (max-width:900px) {
  .hero-corner-object { width:110%; left:-5%; }
  .case-sheet-before .margin-note { position:absolute; top:36%; left:-22px; width:200px; margin:0; font-size:37px; transform:rotate(-7deg); }
  .case-shift { grid-template-columns:1fr; gap:26px; min-height:0; }
  .case-shift-list { max-width:560px; width:100%; margin:auto; }
  .case-shift-arrow { width:96px; margin:auto; transform:rotate(88deg); }
  .case-shift-arrow span { transform:rotate(-88deg) translate(10px,8px); }
  .case-ready { max-width:650px; margin:auto; text-align:center; }
  .case-map { grid-template-areas:'one two' 'four three' 'five signature'; }
}

@media (max-width:600px) {
  .hero-corner-object { width:130%; left:-15%; }
  .case-sheet-before .margin-note { position:relative; top:auto; left:auto; width:94%; margin:-20px auto 26px; font-size:39px; transform:rotate(-4deg); }
  .admin-mark-line { stroke-width:1.6; }
  .after-scene .case-sheet-paper { padding:28px 18px 25px; }
  .case-sheet-after h2 { font-size:39px; }
  .case-shift-list li { min-height:59px; grid-template-columns:27px 1fr; }
  .case-shift-list strong { font-size:23px; }
  .case-ready { font-size:34px; }
  .case-sheet-after .sheet-footnote { margin-left:0; text-align:center; font-size:27px; }
  .case-journey { padding-block:92px 100px; }
  .case-journey .journey-heading h2 { font-size:49px; }
  .journey-heading > p { font-size:16px; }
  .case-map { grid-template-areas:'one' 'two' 'three' 'four' 'five' 'signature'; padding:86px 18px 26px; gap:28px; }
  .map-topbar { padding-inline:12px; }
  .map-topbar span:nth-child(2) { display:none; }
  .map-node { min-height:220px; }
}