/* Proportional scale follows --design-scale. Original: archive/before-scale-85-20261028/paper-depth.css */
/* Approved B refinement: printed surfaces, solid edges, two sides joining.
   Grain is the stationary Paper WebGL material, never a blended raster layer. */
.material-page { --depth:calc(8px * var(--design-scale, .85)); }
.material-page .grow-accent { color:var(--coral); font-style:normal; }
.material-page .studio-intro-title .grow-accent { display:inline; transform:none; margin:0; max-width:none; }
.material-page .chapter-bar { padding:0; }
.material-page .chapter-links { width:100%; }
.material-page .chapter-links a { border-left:0; padding-inline:calc(16px * var(--design-scale, .85)); }
.material-page .chapter-links a + a { border-left:calc(1px * var(--design-scale, .85)) solid #666; }
.material-page .chapter-indicator { bottom:0; height:calc(4px * var(--design-scale, .85)); background:var(--coral); }

/* Three considerations, each with its own weight and surface. */
.material-page .fit-composition { grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr); gap:calc(6vw * var(--design-scale, .85)); }
.material-page .fit-art { margin:calc(24px * var(--design-scale, .85)) 0 0; background:var(--ink); box-shadow:calc(10px * var(--design-scale, .85)) calc(10px * var(--design-scale, .85)) 0 #c9c9c9; }
.material-page .fit-art img { aspect-ratio:2/3; height:auto; min-height:calc(600px * var(--design-scale, .85)); object-fit:cover; }
.material-page .method-list { display:flex; flex-direction:column; gap:calc(28px * var(--design-scale, .85)); padding-right:calc(12px * var(--design-scale, .85)); }
.material-page .method-row,
.material-page .method-row:last-child {
  display:block; width:calc(100% - calc(24px * var(--design-scale, .85))); padding:clamp(calc(28px * var(--design-scale, .85)),calc(2.8vw * var(--design-scale, .85)),calc(58px * var(--design-scale, .85)));
  border:calc(2px * var(--design-scale, .85)) solid var(--ink); background:var(--paper); color:var(--ink);
  box-shadow:var(--depth) var(--depth) 0 var(--ink);
}
.material-page .method-row:nth-child(2) { margin-left:calc(24px * var(--design-scale, .85)); color:var(--paper); background:var(--ink); box-shadow:var(--depth) var(--depth) 0 var(--coral); }
.material-page .method-row .method-tag { display:inline-block; margin:0 0 calc(18px * var(--design-scale, .85)); font-size:max(13px, calc(18px * var(--design-scale, .85))); font-weight:600; }
.material-page .method-row:nth-child(2) .method-tag { color:var(--coral); }
.material-page .method-row h3 { max-width:18ch; font-size:max(13px, clamp(calc(32px * var(--design-scale, .85)),calc(3vw * var(--design-scale, .85)),calc(58px * var(--design-scale, .85)))); }
.material-page .method-row>p:last-child { color:inherit; font-size:max(13px, clamp(calc(22px * var(--design-scale, .85)),calc(1.55vw * var(--design-scale, .85)),calc(30px * var(--design-scale, .85)))); line-height:1.4; margin-top:calc(20px * var(--design-scale, .85)); }
.material-page .process { border:calc(2px * var(--design-scale, .85)) solid var(--ink); box-shadow:calc(10px * var(--design-scale, .85)) calc(10px * var(--design-scale, .85)) 0 #c9c9c9; }

/* Original client marks, never redrawn. Their search roles remain separate. */
.material-page .work-section .section-heading { margin-bottom:calc(56px * var(--design-scale, .85)); }
.material-page .work-section h2 { max-width:13ch; }
.material-page .client-list { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:calc(28px * var(--design-scale, .85)); border:0; }
.material-page .client-row,
.material-page .client-row + .client-row {
  display:flex; flex-direction:column; align-items:stretch; gap:0;
  margin:0; padding:0; background:var(--paper); color:var(--ink);
  border:calc(2px * var(--design-scale, .85)) solid #fff; box-shadow:calc(6px * var(--design-scale, .85)) calc(6px * var(--design-scale, .85)) 0 #707070; min-width:0;
}
.material-page .client-logo { height:calc(150px * var(--design-scale, .85)); padding:calc(30px * var(--design-scale, .85)); display:flex; align-items:center; justify-content:center; background:#fff; border-bottom:calc(1px * var(--design-scale, .85)) solid #d5d5d5; overflow:hidden; }
.material-page [data-logo-tone="dark"] .client-logo { background:#191919; border-color:#454545; }
.material-page .client-logo img { filter:grayscale(1); width:100%; height:100%; max-width:calc(250px * var(--design-scale, .85)); object-fit:contain; }
.material-page .client-logo img[src$="mail-waves.webp"] { filter:brightness(0) invert(1); transform:scale(1.8); }
.material-page .client-row h3 { font-size:max(13px, clamp(calc(25px * var(--design-scale, .85)),calc(2vw * var(--design-scale, .85)),calc(38px * var(--design-scale, .85)))); padding:calc(24px * var(--design-scale, .85)) calc(24px * var(--design-scale, .85)) 0; letter-spacing:-.035em; }
.material-page .client-roles { list-style:none; margin:calc(18px * var(--design-scale, .85)) 0 0; padding:0 calc(24px * var(--design-scale, .85)) calc(28px * var(--design-scale, .85)); font-size:max(13px, clamp(calc(19px * var(--design-scale, .85)),calc(1.4vw * var(--design-scale, .85)),calc(27px * var(--design-scale, .85)))); line-height:1.3; }
.material-page .client-roles li + li { margin-top:calc(10px * var(--design-scale, .85)); }
.material-page .client-event { display:none; }

/* Two surfaces meet. The heading addresses both sides. */
.material-page .experience-section { background:#eaeaea; }
.material-page .experience-heading { display:block; text-align:center; max-width:calc(1600px * var(--design-scale, .85)); margin:0 auto calc(80px * var(--design-scale, .85)); }
.material-page .experience-heading .label { margin-bottom:calc(24px * var(--design-scale, .85)); }
.material-page .experience-heading h2 { max-width:17ch; margin-inline:auto; font-size:max(13px, clamp(calc(64px * var(--design-scale, .85)),calc(6.2vw * var(--design-scale, .85)),calc(138px * var(--design-scale, .85)))); }
.material-page .experience-heading .section-intro { margin:calc(32px * var(--design-scale, .85)) auto 0; max-width:53ch; }
.material-page .voices { display:grid; grid-template-columns:1fr 1fr; gap:0; align-items:start; border:0; background:transparent; }
.material-page .voice-slot { border:calc(2px * var(--design-scale, .85)) solid var(--ink); box-shadow:calc(8px * var(--design-scale, .85)) calc(8px * var(--design-scale, .85)) 0 #b9b9b9; background:#fff; color:var(--ink); }
.material-page .voice-slot[data-audience="clients"] { background:var(--ink); color:#fff; padding-bottom:calc(56px * var(--design-scale, .85)); box-shadow:calc(8px * var(--design-scale, .85)) calc(8px * var(--design-scale, .85)) 0 var(--coral); }
.material-page .voice-slot[data-audience="candidates"] { margin:calc(72px * var(--design-scale, .85)) 0 0 calc(-2px * var(--design-scale, .85)); position:relative; }
.material-page .audience-promise { padding:clamp(calc(28px * var(--design-scale, .85)),calc(3vw * var(--design-scale, .85)),calc(64px * var(--design-scale, .85))); padding-bottom:calc(32px * var(--design-scale, .85)); }
.material-page .audience-promise h3 { font-size:max(13px, clamp(calc(30px * var(--design-scale, .85)),calc(2.7vw * var(--design-scale, .85)),calc(55px * var(--design-scale, .85)))); max-width:15ch; }
.material-page .audience-promise p { margin-top:calc(20px * var(--design-scale, .85)); max-width:35ch; font-size:max(13px, clamp(calc(21px * var(--design-scale, .85)),calc(1.55vw * var(--design-scale, .85)),calc(30px * var(--design-scale, .85)))); line-height:1.4; }
.material-page .voice { height:auto; min-height:0; padding:clamp(calc(28px * var(--design-scale, .85)),calc(3vw * var(--design-scale, .85)),calc(64px * var(--design-scale, .85))); padding-top:calc(26px * var(--design-scale, .85)); border:0; background:transparent; color:inherit; }
.material-page .voice-top { border-top:calc(1px * var(--design-scale, .85)) solid #aaa; padding-top:calc(24px * var(--design-scale, .85)); align-items:center; min-width:0; }
.material-page .voice-label { color:var(--accent); font-size:max(13px, calc(20px * var(--design-scale, .85))); }
.material-page [data-audience="clients"] .voice-label { color:var(--coral); }
.material-page .voice blockquote { max-width:34ch; font-size:max(13px, clamp(calc(29px * var(--design-scale, .85)),calc(2.3vw * var(--design-scale, .85)),calc(48px * var(--design-scale, .85)))); line-height:1.28; padding:calc(32px * var(--design-scale, .85)) 0; font-family:var(--sans); letter-spacing:-.025em; }
.material-page .voice-credit { margin-top:calc(12px * var(--design-scale, .85)); font-size:max(13px, clamp(calc(20px * var(--design-scale, .85)),calc(1.5vw * var(--design-scale, .85)),calc(28px * var(--design-scale, .85)))); line-height:1.4; }
.material-page .voice-credit p { display:flex; flex-direction:column; gap:calc(4px * var(--design-scale, .85)); }
.material-page .voice-credit .credit-separator { display:none; }
.material-page .voice-credit p>span:last-child { font-size:.85em; }
.material-page .quote-controls { gap:calc(10px * var(--design-scale, .85)); }
.material-page .quote-controls button { width:calc(48px * var(--design-scale, .85)); height:calc(36px * var(--design-scale, .85)); min-height:calc(44px * var(--design-scale, .85)); padding:0; border:calc(1px * var(--design-scale, .85)) solid var(--ink); border-radius:0; background:var(--ink); color:#fff; box-shadow:calc(3px * var(--design-scale, .85)) calc(3px * var(--design-scale, .85)) 0 var(--coral); font-size:max(13px, calc(24px * var(--design-scale, .85))); transition:transform .16s,box-shadow .16s; }
.material-page [data-audience="clients"] .quote-controls button { background:#fff; color:var(--ink); border-color:#fff; }
.material-page .quote-controls button:hover { transform:translate(calc(-1px * var(--design-scale, .85)),calc(-1px * var(--design-scale, .85))); box-shadow:calc(4px * var(--design-scale, .85)) calc(4px * var(--design-scale, .85)) 0 var(--coral); }
.material-page .quote-controls button:active { transform:translate(calc(2px * var(--design-scale, .85)),calc(2px * var(--design-scale, .85))); box-shadow:calc(1px * var(--design-scale, .85)) calc(1px * var(--design-scale, .85)) 0 var(--coral); }
.material-page .quote-controls button:focus-visible { outline-color:var(--coral); }
.material-page .quote-progress { display:flex; gap:calc(4px * var(--design-scale, .85)); align-items:center; margin-inline:calc(4px * var(--design-scale, .85)); }
.material-page .quote-progress span { display:block; width:calc(16px * var(--design-scale, .85)); height:calc(3px * var(--design-scale, .85)); background:#8b8b8b; }
.material-page .quote-progress [data-active="true"] { background:var(--accent); }
.material-page [data-audience="clients"] .quote-progress [data-active="true"] { background:var(--coral); }

/* Price and protection have the same physical edge as the primary button. */
.material-page .term-list { display:grid; grid-template-columns:1fr 1fr; gap:calc(32px * var(--design-scale, .85)); border:0; padding-right:calc(10px * var(--design-scale, .85)); }
.material-page .term-list article { border:calc(2px * var(--design-scale, .85)) solid var(--ink); background:#fff; color:var(--ink); box-shadow:calc(8px * var(--design-scale, .85)) calc(8px * var(--design-scale, .85)) 0 var(--ink); padding:clamp(calc(32px * var(--design-scale, .85)),calc(4vw * var(--design-scale, .85)),calc(80px * var(--design-scale, .85))); }
.material-page .term-list article:first-child { background:var(--ink); color:#fff; box-shadow:calc(8px * var(--design-scale, .85)) calc(8px * var(--design-scale, .85)) 0 var(--coral); }
.material-page .term-list article + article { border-left:calc(2px * var(--design-scale, .85)) solid var(--ink); }
.material-page .term-list h3 { font-size:max(13px, clamp(calc(64px * var(--design-scale, .85)),calc(6vw * var(--design-scale, .85)),calc(128px * var(--design-scale, .85)))); }
.material-page .term-list p { font-size:max(13px, clamp(calc(23px * var(--design-scale, .85)),calc(1.8vw * var(--design-scale, .85)),calc(34px * var(--design-scale, .85)))); line-height:1.4; }
.material-page .term-list .small { font-size:max(13px, clamp(calc(18px * var(--design-scale, .85)),calc(1.3vw * var(--design-scale, .85)),calc(24px * var(--design-scale, .85)))); }
.material-page .term-list .text-link { margin-top:calc(28px * var(--design-scale, .85)); }

@media (min-width:1800px) {
  .material-page .client-logo { height:calc(200px * var(--design-scale, .85)); }
}
@media (max-width:1200px) {
  .material-page .client-list { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .material-page .fit-composition { gap:calc(36px * var(--design-scale, .85)); }
  .material-page .fit-art img { min-height:0; }
  .material-page .method-row,.material-page .method-row:last-child { padding:calc(28px * var(--design-scale, .85)); }
  .material-page .voices { margin-right:calc(8px * var(--design-scale, .85)); }
  .material-page .audience-promise,.material-page .voice { padding:calc(32px * var(--design-scale, .85)); }
  .material-page .voice blockquote { font-size:max(13px, calc(30px * var(--design-scale, .85))); }
}
@media (max-width:900px) {
  .material-page .client-list { grid-template-columns:repeat(2,minmax(0,1fr)); gap:calc(24px * var(--design-scale, .85)); }
  .material-page .client-logo { height:calc(132px * var(--design-scale, .85)); padding:calc(24px * var(--design-scale, .85)); }
  .material-page .voice-slot[data-audience="clients"] { padding-bottom:calc(32px * var(--design-scale, .85)); }
  .material-page .voice-slot[data-audience="candidates"] { margin-top:calc(48px * var(--design-scale, .85)); }
  .material-page .audience-promise,.material-page .voice { padding:calc(26px * var(--design-scale, .85)); }
  .material-page .voice-top { flex-wrap:wrap; gap:calc(14px * var(--design-scale, .85)); }
  .material-page .quote-controls { margin-left:auto; }
  .material-page .term-list article { padding:calc(30px * var(--design-scale, .85)); }
}
@media (max-width:700px) {
  .material-page .fit-composition { display:flex; flex-direction:column; gap:calc(40px * var(--design-scale, .85)); }
  .material-page .fit-art { width:calc(100% - calc(10px * var(--design-scale, .85))); margin-top:0; }
  .material-page .fit-art img { min-height:0; height:calc(440px * var(--design-scale, .85)); aspect-ratio:auto; object-position:center; transform:none; }
  .material-page .method-list { gap:calc(24px * var(--design-scale, .85)); padding-right:calc(8px * var(--design-scale, .85)); }
  .material-page .method-row,.material-page .method-row:last-child { width:calc(100% - calc(12px * var(--design-scale, .85))); padding:calc(26px * var(--design-scale, .85)); }
  .material-page .method-row:nth-child(2) { margin-left:calc(12px * var(--design-scale, .85)); }
  .material-page .method-row h3 { font-size:max(13px, calc(34px * var(--design-scale, .85))); }
  .material-page .method-row>p:last-child { font-size:max(13px, calc(22px * var(--design-scale, .85))); }
  .material-page .process { padding:calc(28px * var(--design-scale, .85)) calc(24px * var(--design-scale, .85)); margin-right:calc(10px * var(--design-scale, .85)); }
  .material-page .work-section h2 { font-size:max(13px, clamp(calc(45px * var(--design-scale, .85)),calc(11vw * var(--design-scale, .85)),calc(65px * var(--design-scale, .85)))); }
  .material-page .client-list { gap:calc(18px * var(--design-scale, .85)); margin-right:calc(6px * var(--design-scale, .85)); }
  .material-page .client-logo { height:calc(105px * var(--design-scale, .85)); padding:calc(18px * var(--design-scale, .85)); }
  .material-page .client-row h3 { font-size:max(13px, calc(24px * var(--design-scale, .85))); padding:calc(18px * var(--design-scale, .85)) calc(16px * var(--design-scale, .85)) 0; }
  .material-page .client-roles { font-size:max(13px, calc(18px * var(--design-scale, .85))); padding:0 calc(16px * var(--design-scale, .85)) calc(22px * var(--design-scale, .85)); margin-top:calc(14px * var(--design-scale, .85)); }
  .material-page .experience-heading { margin-bottom:calc(44px * var(--design-scale, .85)); }
  .material-page .experience-heading h2 { font-size:max(13px, clamp(calc(45px * var(--design-scale, .85)),calc(10vw * var(--design-scale, .85)),calc(68px * var(--design-scale, .85)))); }
  .material-page .experience-heading .section-intro { font-size:max(13px, calc(22px * var(--design-scale, .85))); margin-top:calc(24px * var(--design-scale, .85)); }
  .material-page .voices { display:flex; flex-direction:column; gap:0; margin-right:calc(8px * var(--design-scale, .85)); }
  .material-page .voice-slot { width:calc(100% - calc(12px * var(--design-scale, .85))); }
  .material-page .voice-slot[data-audience="clients"] { padding-bottom:calc(36px * var(--design-scale, .85)); }
  .material-page .voice-slot[data-audience="candidates"] { margin:calc(-20px * var(--design-scale, .85)) 0 0 calc(12px * var(--design-scale, .85)); }
  .material-page .audience-promise,.material-page .voice { padding:calc(26px * var(--design-scale, .85)); }
  .material-page .audience-promise h3 { font-size:max(13px, calc(32px * var(--design-scale, .85))); }
  .material-page .audience-promise p { font-size:max(13px, calc(21px * var(--design-scale, .85))); }
  .material-page .voice blockquote { font-size:max(13px, calc(28px * var(--design-scale, .85))); padding-block:calc(28px * var(--design-scale, .85)); }
  .material-page .voice-credit { font-size:max(13px, calc(21px * var(--design-scale, .85))); }
  .material-page .voice-label { font-size:max(13px, calc(18px * var(--design-scale, .85))); }
  .material-page .term-list { grid-template-columns:1fr; gap:calc(32px * var(--design-scale, .85)); }
  .material-page .term-list article { padding:calc(28px * var(--design-scale, .85)); }
  .material-page .term-list h3 { font-size:max(13px, calc(68px * var(--design-scale, .85))); }
  .material-page .term-list p { font-size:max(13px, calc(23px * var(--design-scale, .85))); }
  .material-page .term-list .small { font-size:max(13px, calc(18px * var(--design-scale, .85))); }
}
@media (max-width:380px) {
  .material-page .client-list { grid-template-columns:1fr; }
  .material-page .client-logo { height:calc(120px * var(--design-scale, .85)); }
  .material-page .client-row h3 { font-size:max(13px, calc(29px * var(--design-scale, .85))); }
  .material-page .client-roles { font-size:max(13px, calc(21px * var(--design-scale, .85))); }
  .material-page .audience-promise,.material-page .voice { padding:calc(22px * var(--design-scale, .85)); }
  .material-page .voice blockquote { font-size:max(13px, calc(26px * var(--design-scale, .85))); }
  .material-page .quote-controls { gap:calc(8px * var(--design-scale, .85)); }
  .material-page .quote-controls button { width:calc(44px * var(--design-scale, .85)); }
  .material-page .quote-progress span { width:calc(10px * var(--design-scale, .85)); }
}
@media (prefers-reduced-motion:reduce) {
  .material-page .quote-controls button { transition:none; transform:none; }
}
.material-page.material-reduced-motion *,
.material-page.material-reduced-motion *::before,
.material-page.material-reduced-motion *::after { animation:none!important; transition:none!important; scroll-behavior:auto!important; }