/* Trades (/trades/), from docs/design/v2/trades-b.html in present mode. Only what the page needs beyond home.css:
   the inner-page hero, the paper week across the band edge, the two numbers, the four reasons, the Example Plumbing
   pair on its own stage, and the "What we do" list. The form is off: the hero card is Home's call and email block. */

/* Tokens Home doesn't carry: the paper sheet and two more soft chips, light and dark as the comp */
:root { --chip-y: #FDEBC4; --chip-s: #DCE9FB; --paper: #FFFBF3; --paper-2: #F3E6CC; --paper-3: #F8EEDB; --paper-foot: #FBF1DF; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --chip-y: rgb(253 235 196 / .14); --chip-s: rgb(220 233 251 / .14); --paper: #F1E9D8; --paper-2: #E6D9BE; --paper-3: #EADFC8; --paper-foot: #E9DDC4; }
}
:root[data-theme="dark"] { --chip-y: rgb(253 235 196 / .14); --chip-s: rgb(220 233 251 / .14); --paper: #F1E9D8; --paper-2: #E6D9BE; --paper-3: #EADFC8; --paper-foot: #E9DDC4; }

.chip { width: 34px; height: 34px; border-radius: 10px; display: inline-grid; place-items: center; color: var(--chip-ink); flex: none; }
.chip .i { width: 17px; height: 17px; }
.chip--y { background: var(--chip-y); } .chip--m { background: var(--chip-m); } .chip--s { background: var(--chip-s); }
.body { margin-top: 16px; font-size: 17px; line-height: 1.6; color: var(--ink-2); max-width: 36em; }
.body + .body { margin-top: 12px; }

/* ---------- Inner-page hero: a shorter navy band over warm paper, Home's Aurora along its edge ---------- */
.hero--inner { --bandx: 150px; background: linear-gradient(to bottom, var(--warm) 0, var(--warm) 55%, var(--bg) 100%); }
.hero--inner .hero__grain, .hero--inner::before { display: none; }
.hero--inner .hero__copy { position: relative; text-align: left; justify-items: start; padding-top: 48px; grid-template-columns: minmax(0, 1fr); }
.hero--inner .hero__copy::before, .hero--inner .hero__copy::after { content: ""; position: absolute; z-index: -1; left: calc(50% - 50vw); width: 100vw; top: -60px; bottom: calc(-1 * var(--bandx)); pointer-events: none; }
.hero--inner .hero__copy::before { border-bottom: 1px solid rgb(185 212 247 / .22); background: var(--band); }
.hero--inner .hero__copy::after { opacity: .07; mix-blend-mode: overlay; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); background-size: 160px; }
.hero--inner .hero__glow { display: block; inset: auto; top: -60px; bottom: calc(-1 * var(--bandx)); left: calc(50% - 50vw); width: 100vw; z-index: -1; grid-column: auto !important; grid-row: auto !important; }
.hero--inner .eyebrow { min-height: 0; padding: 0; box-shadow: none; background: none; font-size: 15px; font-weight: 600; color: var(--on-band-2); }
.hero--inner .eyebrow--list { padding: 0; }
.hero--inner h1 { margin-top: 14px; max-width: 15em; font-size: clamp(40px, 4.6vw, 64px); line-height: 1.02; }
.hero--inner h1 span { display: inline; }
.hero--inner .lede { margin-top: 18px; max-width: 720px; font-size: 19px; line-height: 1.5; text-wrap: pretty; }
.hero--inner .weekstage { justify-items: start; }
.hero--trades .under { display: block; margin-top: 18px; max-width: 1100px; }
.hero--trades .ticks { margin-inline: 0; }
@media (min-width: 761px) and (max-width: 1100px) { .hero--trades .ticks { display: grid; grid-template-columns: minmax(0, 560px); justify-content: start; gap: 6px; max-width: none; } }
@media (min-width: 1101px) {
  .hero--inner .aform { margin-top: 26px; }
  .hero--trades .ticks { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .9fr) minmax(0, 1.5fr); gap: 8px 28px; max-width: 1040px; }
}

/* The photo: beside the copy on wide screens, a band under the ticks between 761 and 1100, gone on phones */
.hero__art { display: grid; gap: 8px; width: 100%; margin: 18px 0 0; }
.hero__art__img { position: relative; overflow: hidden; aspect-ratio: 16 / 9; border-radius: 16px; background: #2A3550; box-shadow: 0 0 0 1px rgb(255 255 255 / .1), 0 20px 40px -20px rgb(4 10 24 / .6); }
.hero__art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 62%; }
@media (min-width: 761px) and (max-width: 1100px) { .hero__art { max-width: 720px; } .hero__art__img { aspect-ratio: 21 / 9; } }
@media (min-width: 1101px) {
  .hero--trades .hero__copy { grid-template-columns: minmax(0, 1fr) 360px; column-gap: 64px; }
  .hero--trades .hero__copy > * { grid-column: 1; }
  .hero--trades .hero__copy > .under { grid-column: 1 / -1; }
  .hero__art { grid-template-rows: minmax(0, 1fr) auto; gap: 10px; grid-column: 2 !important; grid-row: 1 / span 5; align-self: stretch; justify-self: stretch; margin: 6px 0 0; min-height: 360px; }
  .hero__art__img { aspect-ratio: auto; border-radius: 22px; box-shadow: 0 0 0 1px rgb(255 255 255 / .1), 0 30px 60px -24px rgb(4 10 24 / .6); }
  .hero__art img { object-position: 50% 60%; }
}

/* ---------- The week, on paper, across the band's edge ---------- */
.weekstage { position: relative; margin-top: 40px; display: grid; grid-template-columns: minmax(0, 1fr); justify-items: center; padding-bottom: 8px; }
.sheets { position: relative; width: min(980px, 100%); }
.sheets::before, .sheets::after { content: ""; position: absolute; inset: 0; border-radius: 6px; background: var(--paper-2); box-shadow: 0 1px 0 rgb(20 40 75 / .06), 0 20px 40px -24px rgb(4 10 24 / .45); }
.sheets::before { transform: rotate(-1.4deg) translate(-6px, 10px); }
.sheets::after { transform: rotate(.9deg) translate(8px, 6px); background: var(--paper-3); }
.sheet { position: relative; z-index: 1; border-radius: 6px; background: var(--paper); color: #14284B; overflow: hidden;
  box-shadow: 0 0 0 1px rgb(120 90 40 / .10), 0 2px 4px rgb(4 10 24 / .08), 0 26px 50px -22px rgb(4 10 24 / .5), 0 60px 110px -40px rgb(4 10 24 / .34); }
.sheet::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .5; mix-blend-mode: multiply; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='p'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 .55  0 0 0 0 .45  0 0 0 0 .3  0 0 0 .06 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23p)'/%3E%3C/svg%3E"); }
.sheet::after { content: ""; position: absolute; top: 0; bottom: 0; left: 56px; width: 1.5px; background: #F2C9B8; }
.sheet__top { position: relative; display: flex; align-items: baseline; gap: 14px; padding: 22px 34px 14px 80px; border-bottom: 1px solid #EEDFC4; }
.sheet__top b { font-weight: 700; font-size: 21px; letter-spacing: -0.02em; }
.sheet__top span { font-size: 17px; color: #3E4F70; }
.sheet__top .num { margin-right: auto; font-size: 15px; font-variant-numeric: tabular-nums; }
.sheet__body { position: relative; display: grid; grid-template-columns: minmax(0, 11fr) minmax(0, 9fr); }
.sheet__lead { padding: 22px 34px 26px 80px; border-right: 1px solid #EEDFC4; }
.sheet__when { font-size: 15px; font-weight: 600; color: #3E4F70; font-variant-numeric: tabular-nums; }
.sheet__quote { margin-top: 10px; font-weight: 500; font-size: clamp(24px, 2.6vw, 32px); line-height: 1.12; letter-spacing: -0.02em; color: #14284B; text-wrap: balance; }
.sheet__quote::before { content: "\201C"; margin-left: -.34em; }
.sheet__quote::after { content: "\201D"; }
.sheet__list { padding: 12px 30px 10px 28px; }
.sheet__list li { display: grid; grid-template-columns: 112px 1fr; gap: 12px; padding: 13px 0; border-bottom: 1px solid #F1E6D2; font-size: 15px; line-height: 1.4; color: #3E4F70; text-wrap: pretty; }
.sheet__list li:last-child { border-bottom: 0; }
.sheet__list time { font-weight: 600; color: #14284B; font-variant-numeric: tabular-nums; }
.sheet__list b { font-weight: 600; color: #14284B; }
.sheet__foot { position: relative; padding: 13px 34px 15px 80px; border-top: 1px solid #EEDFC4; background: var(--paper-foot); font-size: 15px; color: #3E4F70; text-wrap: pretty; }

/* ---------- Your calls: two numbers, side by side ---------- */
.calls__grid { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 64px; align-items: center; }
.nums { padding: 22px; border-radius: 22px; background: var(--surface); box-shadow: var(--shadow-2); }
.nums__top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.nums__top b { font-weight: 600; font-size: 17px; }
.num-row { margin-top: 14px; display: grid; grid-template-columns: 34px 1fr; gap: 14px; align-items: start; padding: 16px; border-radius: 16px; }
.num-row--ours { background: var(--warm); box-shadow: inset 0 0 0 1px var(--warm-line); }
.num-row--own { background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--hair); }
.num-row small { display: block; font-size: 13px; line-height: 1.4; color: var(--ink-2); }
.num-row strong { display: block; margin-top: 2px; font-weight: 600; font-size: 24px; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.num-row span.w { display: block; margin-top: 2px; font-size: 15px; color: var(--ink-2); }

/* ---------- Why choose Measured for your trade: four short cards ---------- */
.pod { margin-top: 28px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.pod li { padding: 22px; border-radius: 20px; background: var(--surface); box-shadow: var(--shadow-2); }
.pod b { display: block; margin-top: 14px; font-weight: 600; font-size: 19px; letter-spacing: -0.02em; line-height: 1.2; }
.pod p { margin-top: 6px; font-size: 15px; line-height: 1.55; color: var(--ink-2); }
@media (max-width: 1100px) { .pod { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---------- Your website: the Example Plumbing pair on its own stage, words beside it ---------- */
.exrow { max-width: none; margin: 0; grid-template-columns: minmax(0, 1fr) 600px; justify-content: normal; gap: 56px; padding: 40px 48px; }
.exrow__copy .h2 { margin-top: 14px; }
.exrow__copy .body { max-width: 30em; }
.exrow__acts { margin-top: 20px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; }
.exrow__acts .btn { min-height: 48px; padding: 0 22px; font-size: 15px; }
.exrow .link { color: var(--ink); }
.exfig { margin: 0; }
@media (max-width: 1100px) { .exrow { grid-template-columns: minmax(0, 1fr); justify-items: center; padding: 32px; gap: 28px; } .exrow__copy { justify-self: stretch; max-width: none; margin-inline: 0; } }

/* ---------- What we do: a list on the page ground, no box ---------- */
.panel { margin-top: 28px; border-top: 1px solid var(--hair); border-bottom: 1px solid var(--hair); }
.svc { display: grid; grid-template-columns: 1fr 1fr; column-gap: 40px; }
.svc li { display: grid; grid-template-columns: 34px 1fr; gap: 14px; align-items: start; padding: 14px 0; border-bottom: 1px solid var(--hair); font-size: 15px; line-height: 1.5; color: var(--ink-2); }
.svc li:first-child { grid-column: 1 / -1; }
.svc li:nth-last-child(-n+2) { border-bottom: 0; }
.svc li b { font-weight: 600; color: var(--ink); }
.svc li a { color: var(--ink); display: inline-flex; align-items: center; min-height: 44px; margin-block: -13px; }
/* Quality bar 22 Oct, X1: "What we do" ends with the set's section gap before the white Questions band, not flush */
.sec:has(+ .qsec) { padding-bottom: 104px; }
@media (max-width: 760px) { .sec:has(+ .qsec) { padding-bottom: 48px; } }

/* ---------- Narrower screens ---------- */
@media (max-width: 1100px) { .calls__grid { grid-template-columns: minmax(0, 1fr); gap: 28px; } }
@media (max-width: 960px) {
  .svc { grid-template-columns: 1fr; }
  .svc li:nth-last-child(2) { border-bottom: 1px solid var(--hair); }
  .sheet__body { grid-template-columns: 1fr; }
  .sheet__lead { border-right: 0; border-bottom: 1px solid #EEDFC4; }
  .sheet__list { padding-left: 80px; }
}
@media (max-width: 760px) {
  .hero--inner { --bandx: 96px; }
  .hero--inner .hero__copy { padding-top: 18px; }
  .hero--inner .eyebrow { font-size: 14px; align-items: center; }
  .hero--inner .eyebrow::before { margin-top: 0; }
  .hero--inner h1 { margin-top: 10px; font-size: 40px; line-height: 1.04; }
  .hero--inner .lede { margin-top: 14px; font-size: 17px; }
  .hero--trades .under { margin-top: 12px; }
  .hero__art { display: none; }
  .weekstage { margin-top: 20px; }
  .sheets { margin-inline: -6px; width: calc(100% + 12px); max-width: none; }
  .sheet::after { left: 26px; }
  .sheet__top { padding: 16px 16px 12px 42px; flex-wrap: wrap; row-gap: 4px; }
  .sheet__top b { font-size: 17px; }
  .sheet__top .num { order: 3; flex-basis: 100%; font-size: 13px; }
  .sheet__lead { padding: 16px 16px 18px 42px; }
  .sheet__quote { font-size: 24px; }
  .sheet__list { padding: 4px 16px 4px 42px; }
  .sheet__list li { grid-template-columns: 1fr; gap: 0; padding: 10px 0; }
  .sheet__foot { padding: 11px 16px 13px 42px; font-size: 13px; }
  .body { font-size: 15px; }
  .calls__grid .nums { display: none; }
  .pod { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .pod li { padding: 18px; display: grid; grid-template-columns: 34px 1fr; column-gap: 14px; }
  .pod b { margin-top: 0; font-size: 17px; align-self: center; }
  .pod p { grid-column: 2; }
  /* Phones: the phone frame alone, at full size, with the two notes as a list under the words */
  .exrow { margin-top: 0; padding: 22px 16px 26px; gap: 20px; border-radius: 22px; }
  .exfig, .exfig__in { width: 240px; height: 444px; }
  .exfig__in { transform: none; }
  .exfig .bframe { display: none; }
  .exfig .phone { position: relative; top: 0; right: auto; }
  .exrow__acts .btn { width: 100%; }
  .panel { margin-top: 20px; }
  .svc li { padding: 11px 0; gap: 12px; }
}
@media (max-width: 374px) { .hero--inner h1 { font-size: 36px; } }

/* F41, 22 Oct: the close card's email line, as the hero's hint, on the cream card (fixed colours in both themes) */
.go .cta2__hint { margin-top: 14px; color: #3E4F70; }
.go .cta2__hint a { color: #14284B; }