/* Calls to action: every page ends with its own, so nothing repeats from page to page.
   cta-card (About) · cta-pick (Services) · cta-album (Gallery) · cta-two (Reviews) · cta-sign (Areas)
   cta-sheet (each service) · cta-town (each town) · cta-inline (mid-page band on service and town pages) */
.cta { position: relative; padding: clamp(90px, 11vw, 160px) 0; overflow: hidden; }
.cta h2 em { color: var(--crimson); }
.cta .lede { margin-top: 24px; }
.cta-btns { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
@media (max-width: 560px) { .cta-btns .btn { flex: 1 1 100%; justify-content: center; } }

/* ---------- About: Ed's business card ---------- */
.cta-card { background: var(--paper-2); }
.cta-card__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(40px, 6vw, 100px); align-items: center; }
.cta-card__stage { display: grid; place-items: center; perspective: 1400px; }
@media (max-width: 900px) { .cta-card__grid { grid-template-columns: 1fr; } .bcard { width: min(100%, 360px); } }
.bcard { position: relative; width: min(100%, 480px); aspect-ratio: 3.5 / 2; transform: rotate(-4deg); animation: bcard-float 6s ease-in-out infinite; }
@keyframes bcard-float { 50% { transform: rotate(-2.5deg) translateY(-8px); } }
.bcard__in { position: absolute; inset: 0; display: grid; grid-template-rows: auto 1fr auto; padding: 8% 8% 7%; border-radius: 6px; background: #fbf8f1;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .8) inset, 0 30px 60px -25px rgba(17, 19, 22, .45), 0 4px 10px rgba(17, 19, 22, .08); }
.bcard__band { position: relative; margin: 0 -8.7%; padding: 3.2% 8.7%; background: var(--crimson); color: #fff; display: flex; align-items: baseline; gap: 12px; }
.bcard__band b { font: 400 clamp(24px, 3vw, 36px)/1 "Marcellus", serif; letter-spacing: .16em; }
.bcard__band small { font: 400 italic clamp(14px, 1.5vw, 18px)/1 var(--serif); color: #111316; }
.bcard__who { align-self: center; }
.bcard__who b { display: block; font: 700 clamp(20px, 2.2vw, 26px)/1.1 var(--display); letter-spacing: -.01em; }
.bcard__who span { display: block; margin-top: 4px; font: 400 italic 16px/1.2 var(--serif); color: var(--muted); }
.bcard__foot { display: flex; justify-content: space-between; gap: 10px; font: 600 12px/1.3 var(--sans); letter-spacing: .04em; color: var(--ink-2); }
.bcard__foot i { font: 400 italic 13px/1.3 var(--serif); letter-spacing: 0; color: var(--crimson); }

/* ---------- Services: which job is yours? ---------- */
.cta-pick__head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .8fr); gap: 40px; align-items: end; }
.cta-pick__grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; margin-top: clamp(36px, 4vw, 56px); }
.cta-pick__grid a { position: relative; display: flex; flex-direction: column; justify-content: flex-end; min-height: 300px; padding: 20px; border-radius: 20px; overflow: hidden; color: #fff; text-decoration: none; isolation: isolate; background: var(--c); }
.cta-pick__grid img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease); }
.cta-pick__grid a::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(0deg, var(--c) 18%, color-mix(in srgb, var(--c) 30%, transparent) 70%); transition: opacity .4s; }
.cta-pick__grid b { font: 700 22px/1.08 var(--display); letter-spacing: -.01em; }
.cta-pick__grid span { margin-top: 8px; display: inline-flex; align-items: center; gap: 8px; font: 600 14px/1.2 var(--sans); }
.cta-pick__grid span .ic { width: 16px; height: 16px; transition: transform .4s var(--ease); }
.cta-pick__grid a:hover img { transform: scale(1.07); }
.cta-pick__grid a:hover span .ic { transform: translateX(4px); }
.cta-pick__grid a[data-ink="dark"] { color: var(--ink); }
.cta-pick__alt { margin-top: 26px; font-size: 16px; color: var(--ink-2); }
@media (max-width: 1000px) { .cta-pick__head { grid-template-columns: 1fr; } .cta-pick__grid { grid-template-columns: 1fr 1fr; } .cta-pick__grid a { min-height: 190px; } }

/* ---------- Gallery: an album page with an empty slot for your house ---------- */
.cta-album { background: #ece6d8; }
.cta-album__grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(40px, 6vw, 100px); align-items: center; }
.cta-album__page { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 26px; padding: clamp(26px, 3vw, 40px); border-radius: 6px; background: #2b2f2a; box-shadow: 0 30px 60px -30px rgba(17, 19, 22, .5); }
.cta-album__print { margin: 0; padding: 10px 10px 34px; background: #fbf8f1; box-shadow: 0 10px 20px rgba(0, 0, 0, .3); transform: rotate(var(--r, -2deg)); }
.cta-album__print img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.cta-album__print figcaption { margin-top: 8px; font: 400 italic 15px/1.2 var(--serif); color: var(--ink-2); text-align: center; }
.cta-album__slot { grid-column: 1 / -1; display: grid; place-items: center; gap: 14px; min-height: 230px; padding: 26px; border: 2px dashed rgba(251, 248, 241, .45); border-radius: 4px; color: #fbf8f1; text-align: center; transform: rotate(.6deg); }
.cta-album__slot b { font: 400 italic clamp(26px, 2.6vw, 36px)/1.1 var(--serif); }
.cta-album__slot .btn--ghost { color: #fbf8f1; }
@media (max-width: 900px) { .cta-album__grid { grid-template-columns: 1fr; } }

/* ---------- Reviews: two doors, one for past customers, one for new ---------- */
.cta-two__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: clamp(36px, 4vw, 56px); }
.cta-two__door { display: flex; flex-direction: column; gap: 14px; padding: clamp(28px, 3.4vw, 48px); border-radius: 24px; text-decoration: none; transition: transform .45s var(--ease), box-shadow .45s var(--ease); }
.cta-two__door:hover { transform: translateY(-6px); box-shadow: 0 30px 50px -30px rgba(17, 19, 22, .5); }
.cta-two__door b { font: 700 clamp(28px, 3vw, 44px)/1 var(--display); font-variation-settings: "wdth" 86; letter-spacing: -.03em; }
.cta-two__door p { margin: 0; max-width: 26em; font-size: 16.5px; line-height: 1.55; opacity: .88; }
.cta-two__door .cta-btns { margin-top: auto; padding-top: 18px; }
.cta-two__door--past { background: #fff; color: var(--ink); }
.cta-two__door--new { background: var(--crimson); color: #fff; }
.cta-two__door--new .btn { --bg: #fff; --fg: var(--ink); --streak: #f6c96b; }
.cta-two__door--new .btn--ghost { --bg: transparent; --fg: #fff; color: #fff; }
.cta-two__g { display: inline-flex; align-items: center; gap: 10px; font: 600 15px/1 var(--sans); }
.cta-two__g svg { width: 22px; height: 22px; }
@media (max-width: 800px) { .cta-two__grid { grid-template-columns: 1fr; } }

/* ---------- Areas: a town-line sign ---------- */
.cta-sign { background: #e4ebe2; }
.cta-sign__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(40px, 6vw, 100px); align-items: center; }
.cta-sign__post { display: grid; justify-items: center; }
.cta-sign__board { position: relative; z-index: 1; padding: 30px 46px 26px; border-radius: 10px; background: #fff; box-shadow: inset 0 0 0 6px #fff, inset 0 0 0 9px #111316, 0 24px 40px -22px rgba(17, 19, 22, .45); text-align: center; transform: rotate(-2deg); animation: sign-sway 5s ease-in-out infinite; transform-origin: 50% 120%; }
@keyframes sign-sway { 50% { transform: rotate(1deg); } }
.cta-sign__board small { display: block; font: 700 14px/1 var(--sans); letter-spacing: .24em; color: #111316; }
.cta-sign__board b { display: block; margin: 12px 0 10px; font: 700 clamp(34px, 4vw, 56px)/1 var(--display); font-variation-settings: "wdth" 80; letter-spacing: .02em; text-transform: uppercase; color: #111316; }
.cta-sign__board span { display: block; font: 600 13px/1.3 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: #3d5a4a; }
.cta-sign__legs { display: flex; gap: 90px; margin-top: -6px; }
.cta-sign__legs i { width: 12px; height: 120px; border-radius: 3px; background: linear-gradient(90deg, #7b7f86, #c9ccd2 45%, #8a8e95); }
@media (max-width: 900px) { .cta-sign__grid { grid-template-columns: 1fr; } .cta-sign__post { order: -1; } }

/* ---------- each service: the written estimate, ticking itself off ---------- */
.cta-sheet { background: var(--tint, #ebe7de); }
.cta-sheet__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(40px, 6vw, 100px); align-items: center; }
.cta-sheet h2 em { color: var(--c, var(--crimson)); }
.sheet { position: relative; padding: clamp(28px, 3vw, 44px); border-radius: 4px; background: #fffdf8; transform: rotate(1.4deg);
  background-image: repeating-linear-gradient(transparent 0 37px, rgba(36, 50, 79, .12) 37px 38px); background-position: 0 92px;
  box-shadow: 0 30px 60px -30px rgba(17, 19, 22, .45), 0 2px 6px rgba(17, 19, 22, .06); }
.sheet::before { content: ""; position: absolute; top: 0; bottom: 0; left: clamp(52px, 5vw, 66px); width: 1.5px; background: rgba(159, 16, 44, .35); }
.sheet__head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding-left: clamp(36px, 3.4vw, 46px); margin-bottom: 20px; }
.sheet__head b { font: 400 22px/1 "Marcellus", serif; letter-spacing: .12em; }
.sheet__head span { font: 400 italic 16px/1 var(--serif); color: var(--muted); }
.sheet ul { list-style: none; margin: 0; padding: 0 0 0 clamp(36px, 3.4vw, 46px); }
.sheet li { position: relative; padding: 9px 0 9px 6px; font: 400 italic clamp(17px, 1.5vw, 20px)/20px var(--serif); color: #24324f; }
.sheet li::before { content: ""; position: absolute; left: -32px; top: 9px; width: 18px; height: 18px; border: 1.5px solid rgba(36, 50, 79, .5); border-radius: 3px; }
.sheet li::after { content: "✓"; position: absolute; left: -30px; top: 3px; font: 700 22px/1 var(--sans); color: var(--c, var(--crimson)); opacity: 0; transform: scale(.4) rotate(-12deg); transition: opacity .3s, transform .45s var(--ease); transition-delay: calc(var(--i) * .28s + .3s); }
.sheet.is-in li::after { opacity: 1; transform: none; }
.sheet__sign { margin-top: 22px; padding-left: clamp(36px, 3.4vw, 46px); font: 400 italic 30px/1 var(--serif); color: #24324f; }
.sheet__sign small { display: block; margin-top: 6px; font: 500 12.5px/1 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
@media (max-width: 900px) { .cta-sheet__grid { grid-template-columns: 1fr; } .sheet { transform: none; } }
@media (prefers-reduced-motion: reduce) { .sheet li::after { opacity: 1; transform: none; transition: none; } .bcard, .cta-sign__board { animation: none; } }

/* ---------- each town: the town itself, with a tag to ask Ed ---------- */
.cta-town { min-height: min(80svh, 720px); display: flex; align-items: center; color: #fff; background: #15171b; }
.cta-town > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cta-town::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(10, 11, 14, .1) 30%, rgba(10, 11, 14, .55)); }
.cta-town .wrap { position: relative; z-index: 1; display: flex; justify-content: flex-end; }
.cta-town__tag { width: min(100%, 470px); padding: clamp(28px, 3vw, 42px); border-radius: 22px; background: #fffdf8; color: var(--ink); box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .6); }
.cta-town__tag h2 { font-size: clamp(36px, 4vw, 58px); }
.cta-town__tag h2 em { color: var(--c, var(--crimson)); }
.cta-town__tag p { margin: 18px 0 0; font-size: 16.5px; line-height: 1.55; color: var(--ink-2); }
.cta-town__credit { position: absolute; right: 16px; bottom: 12px; z-index: 1; font-size: 11.5px; color: rgba(255, 255, 255, .75); }
.cta-town__credit a { color: inherit; }
@media (max-width: 700px) { .cta-town { align-items: flex-end; padding-top: 200px; } }

/* ---------- mid-page band: ask Ed without scrolling to the end ---------- */
.cta-inline { padding: 0 0 clamp(40px, 5vw, 70px); }
.cta-inline__box { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 20px 30px; padding: clamp(24px, 2.6vw, 34px) clamp(26px, 3vw, 44px); border-radius: 22px; background: var(--c, var(--crimson)); color: var(--on, #fff); }
.cta-inline__box p { margin: 0; font: 700 clamp(22px, 2.2vw, 30px)/1.15 var(--display); letter-spacing: -.02em; }
.cta-inline__box p em { font: 400 italic 1em/1 var(--serif); }
.cta-inline__box .cta-btns { margin: 0; }
.cta-inline__box .btn { --bg: var(--on, #fff); --fg: var(--c, var(--ink)); --streak: #f6c96b; }
.cta-inline__box .btn--ghost { --bg: transparent; --fg: var(--on, #fff); color: var(--on, #fff); }

/* ghost "Call now" on coloured cards: dark paint fills it, so the white text stays readable */
.cta-inline__box .btn--ghost, .cta-two__door--new .btn--ghost { --streak: #111316; }
/* the Google-review card: pointing anywhere on the card fills its button */
.cta-two__door--past:hover .btn::after { -webkit-mask-size: 125% 100%; mask-size: 125% 100%; }