/* Marketing polish on top of the cloth-and-foil identity. Remove this file, or set the option tap_market_ui to 0, to go back. */
:root { --tap-shadow-1: 0 1px 2px rgba(21, 43, 38, .06), 0 10px 26px -14px rgba(21, 43, 38, .22); --tap-shadow-2: 0 2px 4px rgba(21, 43, 38, .07), 0 22px 44px -18px rgba(21, 43, 38, .34); --tap-ease: cubic-bezier(.2, .8, .2, 1); }
::selection { background: var(--foil-soft); color: var(--ink); }
a:focus-visible, button:focus-visible, summary:focus-visible { outline: 3px solid var(--foil); outline-offset: 2px; }

/* ---------- Buttons ---------- */
.btn { transition: transform .18s var(--tap-ease), box-shadow .18s var(--tap-ease), background-color .15s, color .15s, border-color .15s; }
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn-cloth { background: linear-gradient(180deg, #27493f, var(--cloth)); box-shadow: 0 8px 18px -10px rgba(21, 43, 38, .75); }
.btn-cloth:hover { background: linear-gradient(180deg, var(--cloth), var(--cloth-deep)); box-shadow: 0 12px 22px -10px rgba(21, 43, 38, .8); }
.btn-foil { box-shadow: 0 8px 18px -10px rgba(184, 137, 59, .9); }
.btn-foil:hover { box-shadow: 0 12px 22px -10px rgba(184, 137, 59, .95); }
.hero-actions .btn-cloth::after, .cta-actions .btn-foil::after { content: "\2192"; display: inline-block; transition: transform .18s var(--tap-ease); }
.hero-actions .btn-cloth:hover::after, .cta-actions .btn-foil:hover::after { transform: translateX(4px); }
.site-header { transition: box-shadow .2s ease; }
.site-header.is-stuck { box-shadow: 0 12px 30px -20px rgba(21, 43, 38, .45); }

/* ---------- Home hero and trust bar ---------- */
.hero { background: radial-gradient(900px 480px at 88% -12%, rgba(184, 137, 59, .17), transparent 62%), radial-gradient(720px 440px at -6% 112%, rgba(31, 61, 54, .1), transparent 62%), var(--paper); }
.hero .hero-proof { display: none; }
.hero-actions .btn { padding: 15px 26px; font-size: 16px; }
.shelf::before { content: ""; position: absolute; left: -6%; right: -6%; bottom: -8px; height: 56px; background: radial-gradient(ellipse at center, rgba(21, 43, 38, .3), transparent 70%); filter: blur(6px); z-index: -1; }
.trustbar { background: var(--white); border-bottom: 1px solid var(--line); }
.trustbar ul { list-style: none; margin: 0 auto; padding: 0 var(--gutter); max-width: var(--wrap); display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.trustbar li { display: flex; align-items: center; gap: 14px; padding: 22px 18px; border-right: 1px solid var(--line); font-size: 15px; line-height: 1.4; color: var(--muted); }
.trustbar li:first-child { padding-left: 0; }
.trustbar li:last-child { border-right: 0; }
.trustbar strong { display: block; color: var(--ink); font-weight: 600; }
.trustbar svg { flex: none; width: 38px; height: 38px; padding: 8px; border-radius: 50%; background: rgba(184, 137, 59, .14); color: var(--cloth); }
@media (max-width: 960px) { .trustbar ul { grid-template-columns: 1fr 1fr; } .trustbar li { border-bottom: 1px solid var(--line); } .trustbar li:nth-child(2n) { border-right: 0; } .trustbar li:first-child { padding-left: 18px; } }
@media (max-width: 520px) { .trustbar ul { grid-template-columns: 1fr; } .trustbar li { border-right: 0; padding: 16px 0; } }

/* ---------- Service cards: icon, lift ---------- */
.service-card { position: relative; transition: transform .22s var(--tap-ease), box-shadow .22s var(--tap-ease), background-color .2s; }
.service-card:hover { z-index: 2; transform: translateY(-4px); box-shadow: var(--tap-shadow-2); }
.service-card::before { content: ""; display: block; width: 48px; height: 48px; margin-bottom: 16px; border-radius: 50%; background-color: #f1ead9; background-position: center; background-repeat: no-repeat; background-size: 24px; }
.service-card:nth-child(7)::before { display: none; }
.service-card:nth-child(1)::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231f3d36' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 20l4.5-1 10-10a2.1 2.1 0 00-3-3l-10 10L4 20z'/%3E%3Cpath d='M13.5 7.5l3 3'/%3E%3C/svg%3E"); }
.service-card:nth-child(2)::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231f3d36' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='6'/%3E%3Cpath d='M20 20l-4.2-4.2M8.5 11l1.8 1.8L13.5 9'/%3E%3C/svg%3E"); }
.service-card:nth-child(3)::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231f3d36' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 4a8 8 0 100 16c1.2 0 1.8-.8 1.4-1.8-.4-1 .2-2.2 1.4-2.2H17a3 3 0 003-3c0-4.4-3.6-9-8-9z'/%3E%3Ccircle cx='8' cy='11' r='1'/%3E%3Ccircle cx='11' cy='7.8' r='1'/%3E%3Ccircle cx='15.2' cy='8.6' r='1'/%3E%3C/svg%3E"); }
.service-card:nth-child(4)::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231f3d36' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 4.5A1.5 1.5 0 016.5 3H19v15H6.5A1.5 1.5 0 005 19.5v-15z'/%3E%3Cpath d='M5 19.5A1.5 1.5 0 006.5 21H19v-3'/%3E%3C/svg%3E"); }
.service-card:nth-child(5)::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231f3d36' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l8 4v10l-8 4-8-4V7l8-4z'/%3E%3Cpath d='M4 7l8 4 8-4M12 11v10'/%3E%3C/svg%3E"); }
.service-card:nth-child(6)::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231f3d36' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='8.5'/%3E%3Cpath d='M3.5 12h17M12 3.5c2.5 2.4 3.8 5.2 3.8 8.5s-1.3 6.1-3.8 8.5c-2.5-2.4-3.8-5.2-3.8-8.5S9.5 5.9 12 3.5z'/%3E%3C/svg%3E"); }
.service-card .card-link::after { content: "\2192"; display: inline-block; margin-left: 6px; transition: transform .18s var(--tap-ease); }
.service-card:hover .card-link::after { transform: translateX(4px); }

/* ---------- Steps ---------- */
.steps:not(.steps-long) li { position: relative; border-top: 0; padding-top: 0; }
.steps:not(.steps-long) li::before { display: grid; place-items: center; width: 52px; height: 52px; margin-bottom: 16px; border-radius: 50%; background: var(--cloth); color: var(--foil-soft); font-size: 1.4rem; box-shadow: 0 0 0 6px rgba(31, 61, 54, .08); }
.steps:not(.steps-long) li:not(:last-child)::after { content: ""; position: absolute; top: 25px; left: 68px; right: -18px; height: 2px; background: linear-gradient(90deg, var(--foil), rgba(184, 137, 59, .15)); }
@media (max-width: 1100px) { .steps:not(.steps-long) li::after { display: none; } }

/* ---------- Reviews, bands, forms, pricing ---------- */
.review { position: relative; background: var(--white); border: 1px solid var(--line); border-left: 3px solid var(--foil); box-shadow: var(--tap-shadow-1); }
.review::before { content: "\201C"; position: absolute; top: 4px; right: 18px; font: 600 4.6rem/1 var(--serif); color: rgba(184, 137, 59, .3); pointer-events: none; }
.band-cloth::before { background: linear-gradient(135deg, var(--cloth), var(--cloth-deep)); }
.form-panel { background: var(--white); border: 1px solid var(--line); border-top: 4px solid var(--foil); padding: clamp(22px, 3vw, 36px); box-shadow: var(--tap-shadow-1); }
.price-card { transition: transform .22s var(--tap-ease), box-shadow .22s var(--tap-ease); }
.price-card:hover { transform: translateY(-4px); box-shadow: var(--tap-shadow-2); }
.page-head { background: radial-gradient(760px 340px at 100% 0, rgba(184, 137, 59, .13), transparent 62%), var(--paper); }
.page-head h1::after { content: ""; display: block; width: 56px; height: 3px; margin-top: 18px; background: var(--foil); }

/* ---------- Closing call to action ---------- */
.cta-band { position: relative; overflow: hidden; border-left: 0; border-top: 4px solid var(--foil); background: linear-gradient(120deg, var(--cloth-deep), var(--cloth) 72%); box-shadow: var(--tap-shadow-2); }
.cta-band::before { content: ""; position: absolute; right: -64px; top: -90px; width: 290px; height: 290px; border-radius: 50%; border: 34px solid rgba(184, 137, 59, .22); pointer-events: none; }
.cta-band::after { content: ""; position: absolute; right: 130px; bottom: -120px; width: 210px; height: 210px; border-radius: 50%; background: rgba(184, 137, 59, .12); pointer-events: none; }
.cta-band > * { position: relative; z-index: 1; }
.cta-band h2 { font-size: clamp(1.7rem, 1.2rem + 1.6vw, 2.4rem); }
.cta-band .btn { padding: 15px 26px; font-size: 16px; }
.site-footer { border-top: 4px solid var(--foil); }

/* ---------- Scroll reveal (stays visible if the script does not run) ---------- */
.tap-js .rv-in { opacity: 0; transform: translateY(16px); transition: opacity .6s var(--tap-ease), transform .6s var(--tap-ease); }
.tap-js .rv-in.is-in { opacity: 1; transform: none; }
.tap-js .service-card.rv-in.is-in:hover, .tap-js .price-card.rv-in.is-in:hover { transform: translateY(-4px); transition: transform .22s var(--tap-ease), box-shadow .22s var(--tap-ease); }
@media (prefers-reduced-motion: reduce) {
	.tap-js .rv-in, .tap-js .rv-in.is-in { opacity: 1; transform: none; transition: none; }
	.btn, .btn:hover, .service-card, .price-card { transition: none; }
}
.cta-note { margin: 10px 0 0 !important; font-size: 14px; opacity: .85; }

/* At a glance, last updated, more from this hub */
.pg-updated { margin: 14px 0 0; color: var(--muted); font-size: 14px; }
.at-a-glance { margin: 1.6em 0; padding: clamp(18px, 2.4vw, 26px); background: var(--white); border: 1px solid var(--line); border-left: 4px solid var(--foil); border-radius: var(--radius); box-shadow: var(--tap-shadow-1); }
.at-a-glance .ag-title { margin: 0 0 12px; font: 600 1.15rem/1.2 var(--serif); color: var(--cloth-deep); }
.at-a-glance dl { display: grid; grid-template-columns: minmax(110px, 160px) minmax(0, 1fr); gap: 10px 18px; margin: 0; }
.at-a-glance dt { font: 600 14px/1.5 var(--sans); color: var(--muted); }
.at-a-glance dd { margin: 0; line-height: 1.55; }
@media (max-width: 560px) { .at-a-glance dl { grid-template-columns: 1fr; gap: 2px; } .at-a-glance dd { margin-bottom: 10px; } }
.more-in-hub ul { columns: 2; column-gap: 32px; padding-left: 1.1em; }
@media (max-width: 640px) { .more-in-hub ul { columns: 1; } }
