/* Operation: the centrepiece is the cut, drawn in section. The line on the
   surface is small; the repair runs down through every layer beneath it.
   Then a quieter room for scars after cancer treatment. */

.op-what { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 96px); align-items: center; }
.op-what h2 { margin-bottom: 22px; }

.cut { position: relative; margin: 0; aspect-ratio: 640 / 380; border-radius: 28px; overflow: hidden; background: var(--esp-2); box-shadow: inset 0 0 0 1px rgba(227, 161, 90, .16), 0 50px 100px -56px rgba(0, 0, 0, .9); }
.cut svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.cut-halo { animation: seam-breathe 5s ease-in-out infinite alternate; }
@keyframes seam-breathe { from { opacity: .22; } to { opacity: .5; } }
.cut-label { position: absolute; font-size: .84rem; font-weight: 700; letter-spacing: .03em; color: var(--cream); white-space: nowrap; }
/* "what you see" sits above the surface line, pointing down at it */
.cut-seen { left: 50%; top: 6%; translate: -50% 0; padding-bottom: 14px; background: linear-gradient(var(--ember-hi), var(--ember-hi)) no-repeat 50% 100% / 1.5px 10px; }
/* "what healed underneath" sits beside the seam, low in the muscle */
.cut-deep { left: 57%; top: 64%; padding: 6px 12px; border-radius: 999px; background: rgba(26, 19, 15, .72); color: var(--ember-hi); }
.cut-layer { position: absolute; left: 4%; translate: 0 -50%; font-size: .78rem; font-weight: 700; letter-spacing: .04em; color: rgba(42, 29, 21, .75); }
.cut-layer.cut-on-dark { color: rgba(253, 244, 232, .88); }

/* after cancer: a darker, quieter room inside the page */
.quiet-room { padding: clamp(28px, 5vw, 72px); border-radius: 34px; background: var(--esp-0); box-shadow: inset 0 0 0 1px rgba(244, 233, 218, .06); }
.qr-intro { max-width: 66ch; }
.qr-intro h2 { margin-bottom: 20px; }
.qr-intro p { margin-top: 1em; color: var(--cream-2); font-size: 1.08rem; line-height: 1.75; }
.qr-intro a { color: var(--ember-hi); }
.qr-cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 72px); margin-top: 44px; }
.qr-cols h3 { font-family: var(--serif); font-weight: 400; font-size: 1.4rem; line-height: 1.2; }
.qr-list { margin: 16px 0 0; padding: 0; list-style: none; display: grid; gap: 14px; }
.qr-list li { position: relative; padding-left: 28px; color: var(--cream-2); }
.qr-list li::before { content: ''; position: absolute; left: 0; top: .55em; width: 12px; height: 12px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--ember); }
.qr-list strong { color: var(--cream); font-weight: 700; }
.qr-check li::before { border-radius: 3px; box-shadow: inset 0 0 0 1.5px var(--latte); }
.qr-note { margin-top: 18px; padding-top: 16px; font-size: .96rem; color: var(--cream-3); background: linear-gradient(90deg, rgba(227, 161, 90, .4), rgba(227, 161, 90, 0)) no-repeat 0 0 / 100% 1px; }
.qr-voice { margin-top: 40px; background: var(--esp-2); }

.op-intro { margin-top: 14px; max-width: 58ch; color: var(--cream-2); font-size: 1.08rem; }
.op-research { margin-top: 40px; }
.op-later { margin-top: 28px; }
#hvornaar .two { align-items: start; }
#hvornaar .careful { max-width: none; }
.op-quote { padding-top: clamp(40px, 5vw, 72px); }

@media (max-width: 960px) {
  .op-what, .qr-cols { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .cut-label { font-size: .74rem; }
  .cut-deep { left: auto; right: 4%; top: 68%; padding: 4px 10px; }
  .cut-layer { font-size: .7rem; }
  .quiet-room { border-radius: 26px; }
}
@media (prefers-reduced-motion: reduce) {
  .cut-halo { animation: none; }
}