/* Trade page layout only. Components and tokens live in site.css.
   .ph (page head), .steps (four-actor line) and .contact (closing band) mirror about.css on purpose:
   candidates for site.css once the subpages settle. */

/* ---------- page head: copy on bone, the room running off the right edge ---------- */
.ph{padding-bottom:clamp(56px,6vw,104px)}
.ph__in{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gutter)}
.ph__media{position:relative;grid-column:7 / -1;grid-row:1;margin-right:calc(var(--edge) * -1);min-height:clamp(520px,calc(100svh - 112px - 136px),720px);overflow:hidden;background:var(--linen)}
.ph__media picture,.ph__media img{position:absolute;inset:0;width:100%;height:100%}
.ph__media img{object-fit:cover;object-position:50% 45%}
.ph__callout{--x:40%;--y:12%}
.ph__text{grid-column:1 / 7;grid-row:1;display:flex;flex-direction:column;justify-content:space-between;gap:var(--space-xl);padding:var(--space-2xs) clamp(0px,3vw,48px) 0 0}
.ph__copy{display:grid;gap:var(--space-md)}
.ph h1{display:grid;gap:var(--space-sm);font-weight:inherit}
.ph__kicker{font-size:var(--fs-ui);font-weight:500;line-height:1.35;color:var(--ink-2);letter-spacing:.01em}
.ph__display{font-family:var(--display);font-size:var(--fs-display);font-weight:340;line-height:.98;letter-spacing:-.02em;text-wrap:balance}
.ph__lede{font-size:var(--fs-lead);line-height:1.5;color:var(--ink-2);max-width:42ch}
.ph__actions{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-xs) var(--space-md);margin-top:var(--space-2xs)}
@media (prefers-reduced-motion:no-preference){
  .ph__media img{animation:phSettle 2.4s var(--ease-expo) both}
  .ph__copy > *{animation:phRise 1.1s var(--ease-expo) both}
  .ph__copy > :nth-child(2){animation-delay:.08s}
  .ph__copy > :nth-child(3){animation-delay:.16s}
  .ph__copy > :nth-child(4){animation-delay:.24s}
  .ph__callout{animation:fadeIn 1s .9s var(--ease-quart) both}
}
@keyframes phSettle{from{transform:scale(1.05)}to{transform:none}}
@keyframes phRise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}

/* ---------- benefits: the head and a set of sample boards on the left, the four benefits on the right ---------- */
.tr-ben{padding-top:clamp(24px,3vw,48px)}
.tr-ben__head{grid-column:1 / 6;grid-row:1}
.tr-samples{grid-column:1 / 6;grid-row:2;align-self:start;position:sticky;top:calc(var(--hdr-h) + var(--space-lg));margin-top:clamp(40px,5vw,72px)}
.tr-samples__set{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:var(--space-xs);align-items:start;padding-bottom:40px}
.tr-samples__set li{aspect-ratio:1 / 2;overflow:hidden;background:var(--linen);box-shadow:0 30px 36px -28px oklch(0.15 0.02 60 / .55);transition:transform .8s var(--ease-expo)}
.tr-samples__set li:nth-child(2){transform:translateY(28px)}
.tr-samples__set li:nth-child(3){transform:translateY(10px)}
.tr-samples__set li:nth-child(4){transform:translateY(38px)}
.tr-samples__set li:nth-child(5){transform:translateY(18px)}
.tr-samples__set picture,.tr-samples__set img{display:block;width:100%;height:100%;object-fit:cover}
.tr-samples .cap span a{position:relative;color:var(--ink);text-decoration-color:var(--rule-strong)}
.tr-samples .cap span a::after{content:"";position:absolute;left:-4px;right:-4px;top:50%;height:44px;transform:translateY(-50%)}
.tr-ben__main{grid-column:7 / 13;grid-row:1 / 3;align-self:start;display:grid;gap:var(--space-lg)}
.tr-ben__list{border-top:1px solid var(--ink)}
.tr-ben__list li{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:var(--space-2xs) var(--gutter);padding:var(--space-md) 0;border-bottom:1px solid var(--rule)}
.tr-ben__t{font-family:var(--display);font-size:var(--fs-h3);font-weight:440;line-height:1.15;text-wrap:balance}
.tr-ben__list li > p{padding-top:4px;font-size:var(--fs-ui);line-height:1.6;color:var(--ink-2);max-width:48ch}
.tr-ben__more{display:flex;flex-wrap:wrap;gap:0 var(--space-lg)}
.tr-ben__more .link-arrow{color:var(--ink);min-height:44px}
/* finished walls: one wide, one tall, set off the same baseline */
.tr-work{align-items:end;margin-top:clamp(56px,6vw,104px)}
.tr-work__a{grid-column:1 / 8}
.tr-work__b{grid-column:9 / 13}
.tr-work .cap{margin-top:var(--space-xs)}

/* ---------- how a trade project runs: one line, four names on it ---------- */
.tr-how{padding-top:0}
.tr-how .wrap{padding-top:clamp(40px,4vw,64px);border-top:1px solid var(--rule)}
.tr-how .sec-head{margin-bottom:clamp(40px,5vw,72px)}
.steps{position:relative;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));column-gap:var(--gutter)}
.steps::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:var(--ink)}
.steps li{position:relative;display:grid;gap:var(--space-2xs);align-content:start;padding-top:var(--space-lg)}
.steps li::before{content:"";position:absolute;left:0;top:-5px;width:11px;height:11px;border-radius:50%;background:var(--bone);box-shadow:inset 0 0 0 1px var(--ink)}
.steps .is-gift::before{background:var(--tobacco);box-shadow:0 0 0 4px oklch(0.41 0.072 55 / .16)}
.steps__who{font-size:var(--fs-small);font-weight:600;color:var(--ink-2)}
.steps .is-gift .steps__who{color:var(--tobacco)}
.steps__t{font-family:var(--display);font-size:var(--fs-h3);font-weight:440;line-height:1.2;text-wrap:balance}
.steps li > p:last-child{margin-top:4px;font-size:var(--fs-ui);line-height:1.55;color:var(--ink-2);max-width:34ch}

/* ---------- application ---------- */
.tr-apply__copy{grid-column:1 / 6;display:grid;gap:var(--space-md);align-content:start;position:sticky;top:calc(var(--hdr-h) + var(--space-lg));align-self:start}
.tr-form{grid-column:7 / 13;grid-row:1 / span 2;align-self:start;display:grid;gap:var(--space-md)}
.tr-form__t{font-family:var(--display);font-size:var(--fs-h3);font-weight:440;line-height:1.15}
.tr-form__s{margin-top:calc(var(--space-md) * -1 + 6px);margin-bottom:var(--space-2xs);font-size:var(--fs-ui)}
.tr-form form{display:grid;gap:var(--space-sm)}
.tr-form .fields{margin-bottom:var(--space-2xs)}
.tr-form__submit{min-height:56px;font-size:1.0625rem}
/* after a successful application only "Application received." stays (the form and its intro hide together) */
.tr-form:has(#tradeDone:not([hidden])) .tr-form__t{display:none}

/* contact band: shared component, site.css 14b */

/* ---------- responsive ---------- */
/* short desktop screens (1366×657, 1280×650): the primary button stays on the first screen */
@media (min-width:901px) and (max-height:820px){
  .ph__media{min-height:clamp(440px,calc(100svh - 150px),560px)}
  .ph__text{gap:var(--space-lg)}
  .ph__copy{gap:var(--space-sm)}
  .ph__display{font-size:min(var(--fs-display),3.5rem)}
  .ph__lede{font-size:1.125rem}
}
@media (min-width:901px) and (max-width:1366px){
  .ph__callout{display:none}
}
@media (max-width:1180px){
  .ph__media{grid-column:7 / -1}
  .ph__text{grid-column:1 / 7;padding-right:var(--space-sm)}
  .ph__display{font-size:min(var(--fs-display),3.25rem)}
  .ph__lede{font-size:1.125rem}
  .tr-ben__list li{grid-template-columns:1fr}
  .tr-ben__list li > p{padding-top:0}
}
@media (max-width:900px){
  .ph{padding-bottom:var(--space-2xl)}
  .ph__in{display:flex;flex-direction:column}
  .ph__media{order:-1;min-height:0;height:clamp(240px,60vw,460px);margin-inline:calc(var(--margin) * -1)}
  .ph__media img{object-position:50% 40%}
  .ph__callout{display:none}
  .ph__text{padding:var(--space-sm) 0 0;gap:var(--space-sm)}
  .ph__copy{gap:var(--space-sm)}
  .ph__lede{font-size:1.0625rem}
  .ph__actions{gap:var(--space-2xs) var(--space-sm)}
  .tr-ben__head,.tr-samples,.tr-ben__main,.tr-apply__copy,.tr-form{grid-column:1 / -1;grid-row:auto}
  .tr-samples{position:static;order:2;margin-top:var(--space-xl)}
  .tr-ben__main{order:3;margin-top:var(--space-xl)}
  .tr-work{display:block;margin-top:var(--space-xl)}
  .tr-work__b{display:none}
  .tr-work__a .media{margin-inline:calc(var(--margin) * -1)}
  .tr-apply{padding-bottom:0}
  .tr-apply__copy{position:static}
  .tr-how .wrap{border-top:0;padding-top:0}
  .tr-samples__set{gap:var(--space-2xs);padding-bottom:30px}
  .steps{grid-template-columns:1fr;padding-left:var(--space-lg)}
  .steps::before{left:5px;right:auto;top:6px;bottom:6px;width:1px;height:auto}
  .steps li{padding:0 0 var(--space-lg)}
  .steps li:last-child{padding-bottom:0}
  .steps li::before{left:calc(var(--space-lg) * -1);top:6px}
  .steps li > p:last-child{max-width:52ch}
  .tr-form{margin-top:var(--space-xl);margin-inline:calc(var(--margin) * -1);padding:var(--space-lg) var(--margin)}
}
/* phones: the same story, shorter */
@media (max-width:760px){
  .page-trade{--section:60px}
  .ph__media{height:clamp(220px,56vw,320px)}
  .ph__actions .link-arrow{display:none}
  .crumbs{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
  .tr-ben__list li{padding:var(--space-sm) 0}
  .tr-ben__t{font-size:1.375rem}
  .steps__t{font-size:1.375rem}
}
/* short phones (375×667, 360×640): the button stays on the first screen */
@media (max-width:760px) and (max-height:740px){
  .ph__media{height:clamp(120px,34vw,160px)}
  .ph__text{padding-top:var(--space-xs)}
  .ph__copy,.ph h1{gap:var(--space-xs)}
  .ph__lede{font-size:1rem;line-height:1.45}
}