/* Ways to work as a "Monthly / Per project" switch with expandable rows (built by pricing-menu.js). */
.pm { margin-top: 40px; }

.pm-bar {
  position: sticky; top: 0; z-index: 5;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px;
  padding: 14px 0; margin-bottom: 8px;
  background: rgba(5, 8, 12, .94); backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
}
.pm-ask { margin: 0; font-family: var(--font-display); text-transform: uppercase; letter-spacing: .02em; font-size: 1.05rem; }

.pm-seg { position: relative; display: inline-grid; grid-template-columns: 1fr 1fr; padding: 4px; border: 1px solid var(--line); border-radius: 999px; }
.pm-tab {
  position: relative; z-index: 1; padding: 9px 22px; border: 0; background: none; cursor: pointer;
  color: #c8ccd2; font: inherit; font-size: .85rem; letter-spacing: .04em; text-transform: uppercase; white-space: nowrap;
  transition: color .25s ease;
}
.pm-tab[aria-selected="true"] { color: #05080c; }
.pm-tab:focus-visible { outline: 2px solid var(--gold-2); outline-offset: 2px; border-radius: 999px; }
.pm-ind {
  position: absolute; top: 4px; bottom: 4px; left: 4px; width: calc(50% - 4px);
  border-radius: 999px; background: var(--gold-2);
  transition: transform .35s cubic-bezier(.2, .8, .2, 1);
}
.pm[data-mode="project"] .pm-ind { transform: translateX(100%); }

.pm-group { margin: 28px 0 4px; color: var(--gold-2); font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; }

/* A row: the card loses its box and becomes a line in a price menu. */
.ways-to-work .pm-row {
  display: block; margin: 0; padding: 0; min-height: 0;
  background: none; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; box-shadow: none;
}
.ways-to-work .pm-row::before { display: none; }
.ways-to-work .pm-row.pm-featured {
  margin: 8px 0; border: 1px solid var(--gold); border-radius: 14px; background: var(--navy);
}
.ways-to-work .pm-h { margin: 0; font-size: inherit; }
.pm-head {
  display: grid; grid-template-columns: 2.2rem minmax(0, 1fr) auto 1.2rem; gap: 16px; align-items: center;
  width: 100%; padding: 20px 8px; border: 0; background: none; color: inherit; font: inherit; font-family: var(--font-main); text-transform: none; letter-spacing: normal; text-align: left; cursor: pointer;
}
.pm-featured .pm-head { padding-inline: 20px; }
.pm-head:focus-visible { outline: 2px solid var(--gold-2); outline-offset: -2px; }
.pm-n { color: var(--gold-2); font-size: .78rem; letter-spacing: .08em; font-variant-numeric: tabular-nums; }
.pm-main { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; min-width: 0; }
.pm-title { font-family: var(--font-display); text-transform: uppercase; font-size: 1.15rem; letter-spacing: .02em; color: #fff; }
.pm-badge { padding: 3px 10px; border: 1px solid var(--gold); border-radius: 999px; color: var(--gold-2); font-size: .66rem; letter-spacing: .1em; text-transform: uppercase; }
.pm-desc { flex-basis: 100%; color: #9aa1aa; font-size: .9rem; line-height: 1.5; }
.pm-price { color: var(--gold-2); font-weight: 700; font-size: 1.15rem; white-space: nowrap; text-align: right; }
.pm-chev { width: 10px; height: 10px; justify-self: end; border-right: 1.5px solid #c8ccd2; border-bottom: 1.5px solid #c8ccd2; transform: translateY(-3px) rotate(45deg); transition: transform .3s ease; }
.pm-row.is-open .pm-chev { transform: translateY(2px) rotate(-135deg); }
.pm-head:hover .pm-title { color: var(--gold-2); }

/* Expand: animate the row height without measuring it. */
.pm-body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .4s cubic-bezier(.2, .8, .2, 1); }
.pm-row.is-open .pm-body { grid-template-rows: 1fr; }
.pm-inner { overflow: hidden; min-height: 0; padding: 0 8px 0 calc(2.2rem + 24px); opacity: 0; transition: opacity .3s ease, padding .4s ease; }
.pm-row.is-open .pm-inner { padding-bottom: 24px; opacity: 1; }
.pm-featured .pm-inner { padding-right: 20px; }
.ways-to-work .pm-inner .ways-to-work-scope { margin-top: 4px; }
.ways-to-work .pm-inner .btn { margin-top: 4px; }

.ways-to-work .pm .ways-to-work-note { margin: 18px 0 0; color: #9aa1aa; font-size: .85rem; line-height: 1.6; max-width: 820px; }

/* Switching lists: rows rise in one after another. */
.pm-in { animation: pm-rise .45s cubic-bezier(.2, .8, .2, 1) both; animation-delay: calc(var(--i, 0) * 45ms); }
@keyframes pm-rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

@media (max-width: 640px) {
  .pm-bar { padding: 10px 0; }
  .pm-ask { display: none; }
  .pm-seg { width: 100%; }
  .pm-tab { padding: 10px 8px; }
  .pm-head { grid-template-columns: minmax(0, 1fr) 1rem; grid-template-areas: "main chev" "price chev"; gap: 6px 12px; padding: 16px 4px; }
  .pm-n { display: none; }
  .pm-main { grid-area: main; }
  .pm-chev { grid-area: chev; }
  .pm-title { font-size: 1rem; }
  .pm-price { grid-area: price; text-align: left; font-size: 1rem; white-space: normal; }
  .pm-desc { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .pm-inner { padding-left: 4px; }
  .pm-featured .pm-head { padding-inline: 14px; }
  .pm-featured .pm-inner { padding-inline: 14px; }
}

@media (prefers-reduced-motion: reduce) {
  .pm-ind, .pm-body, .pm-inner, .pm-chev, .pm-tab { transition: none; }
  .pm-in { animation: none; }
}

/* Monthly plans: two full cards side by side, the featured one highlighted with a translated badge
   (data-badge), and a gold line icon per included item (data-icon). Built by pricing-menu.js. */
.pm-plans { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; align-items: stretch; margin-top: 36px; }
.ways-to-work .pm-plans .pm-plan {
  position: relative; display: flex; flex-direction: column; gap: 14px; margin: 0; min-height: 0;
  padding: 40px 32px 32px; border: 1px solid rgba(193, 161, 116, .42); border-radius: 18px;
  background: rgba(7, 12, 18, .92); box-shadow: none; text-align: left;
}
.ways-to-work .pm-plans .pm-plan::before { display: none; }
.ways-to-work .pm-plans .pm-plan[data-featured] { border-color: #e1c69d; box-shadow: 0 0 0 1px rgba(225, 198, 157, .18), 0 0 42px rgba(225, 198, 157, .12); }
.ways-to-work .pm-plans .pm-plan[data-badge]::after {
  content: attr(data-badge); position: absolute; top: -15px; left: 50%; transform: translateX(-50%);
  padding: 7px 20px; border-radius: 999px; background: #e1c69d; color: #05080c; white-space: nowrap;
  font-family: var(--font-display); font-size: .8rem; letter-spacing: .24em; text-transform: uppercase;
}
.ways-to-work .pm-plans .pm-plan h3 { margin: 0; text-align: center; font-family: var(--font-display); text-transform: uppercase; letter-spacing: .02em; font-size: clamp(1.9rem, 3.2vw, 2.7rem); line-height: 1.05; color: #e1c69d; }
.ways-to-work .pm-plans .pm-plan .ways-to-work-start { margin: -4px 0 0; text-align: center; order: 1; }
.ways-to-work .pm-plans .pm-plan h3 { order: 0; }
.ways-to-work .pm-plans .pm-plan > :not(h3):not(.ways-to-work-start) { order: 2; }
.ways-to-work .pm-plans .pm-plan .ways-to-work-price {
  margin: 4px 0 0; padding: 14px 0; text-align: center; border-top: 1px solid rgba(193, 161, 116, .35); border-bottom: 1px solid rgba(193, 161, 116, .35);
  font-family: var(--font-display); font-size: clamp(2.8rem, 5vw, 3.8rem); line-height: 1; color: #fff; white-space: nowrap;
}
.ways-to-work .pm-plans .pm-plan .ways-to-work-price small { font-family: var(--font-main); font-size: .38em; color: #e1c69d; letter-spacing: .02em; margin-left: 4px; }
.ways-to-work .pm-plans .pm-plan > p:not([class]) { margin: 0; color: #c0c8cf; text-align: center; }
.ways-to-work .pm-plans .pm-plan .ways-to-work-scope { margin: 6px 0 0; font-size: .72rem; letter-spacing: .16em; text-transform: uppercase; color: #9fa9b3; }
.ways-to-work .pm-plans .pm-plan ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 15px; }
.ways-to-work .pm-plans .pm-plan li[data-icon] { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 14px; align-items: start; margin: 0; padding: 0; color: #f0e8d9; line-height: 1.45; }
.ways-to-work .pm-plans .pm-plan li[data-icon]::before {
  content: ""; position: static; width: 26px; height: 26px; margin: -2px 0 0; border: 0; border-radius: 0; background: #e1c69d;
  -webkit-mask: var(--ic) center / contain no-repeat; mask: var(--ic) center / contain no-repeat;
}
.ways-to-work .pm-plans .pm-plan .btn { align-self: center; margin-top: auto; }
.ways-to-work .pm-plans .pm-plan ul { margin-bottom: 18px; }
[data-icon="web"] { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='16' rx='2'/%3E%3Cpath d='M3 9h18M6.5 6.5h.01M9 6.5h.01'/%3E%3C/svg%3E"); }
[data-icon="domain"] { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cellipse cx='12' cy='6' rx='7' ry='3'/%3E%3Cpath d='M5 6v12c0 1.7 3.1 3 7 3s7-1.3 7-3V6M5 12c0 1.7 3.1 3 7 3s7-1.3 7-3'/%3E%3C/svg%3E"); }
[data-icon="edit"] { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M11 4H5a2 2 0 0 0-2 2v13a2 2 0 0 0 2 2h13a2 2 0 0 0 2-2v-6'/%3E%3Cpath d='M17.5 3.5a2.1 2.1 0 0 1 3 3L12 15l-4 1 1-4z'/%3E%3C/svg%3E"); }
[data-icon="seo"] { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='10.5' cy='10.5' r='6.5'/%3E%3Cpath d='M15.5 15.5 21 21'/%3E%3C/svg%3E"); }
[data-icon="chat"] { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 5.5A1.5 1.5 0 0 1 4.5 4h10A1.5 1.5 0 0 1 16 5.5v6a1.5 1.5 0 0 1-1.5 1.5H8l-4 3v-3.2A1.5 1.5 0 0 1 3 11.5z'/%3E%3Cpath d='M16 9h3.5A1.5 1.5 0 0 1 21 10.5v6a1.5 1.5 0 0 1-1 1.4V21l-3.5-3H11a1.5 1.5 0 0 1-1.5-1.5V16'/%3E%3C/svg%3E"); }
[data-icon="image"] { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Ccircle cx='9' cy='10' r='1.8'/%3E%3Cpath d='m3 17 5-5 4 4 3-3 6 5'/%3E%3C/svg%3E"); }
[data-icon="chart"] { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 20h18M6 20v-7M11 20V9M16 20v-5M20 20V5'/%3E%3C/svg%3E"); }
@media (max-width: 820px) {
  .pm-plans { grid-template-columns: 1fr; gap: 40px; }
  .ways-to-work .pm-plans .pm-plan[data-featured] { order: -1; }
  .ways-to-work .pm-plans .pm-plan { padding: 36px 22px 26px; }
}
[data-icon="prospects"] { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='8' r='3.2'/%3E%3Cpath d='M3 20c0-3.3 2.7-6 6-6s6 2.7 6 6'/%3E%3Ccircle cx='17.5' cy='9.5' r='2.4'/%3E%3Cpath d='M16 14.4c.5-.2 1-.3 1.5-.3 2.5 0 4.5 2 4.5 4.6'/%3E%3C/svg%3E"); }

/* Contract terms under each monthly price. */
.ways-to-work .pm-plans .pm-plan .ways-to-work-terms { margin: -4px 0 0; text-align: center; font-size: .84rem; color: #c0c8cf; letter-spacing: .01em; }
.home-plans .pm-plan .ways-to-work-terms { margin: -4px 0 0; text-align: center; font-size: .84rem; color: #c0c8cf; }

/* One-off projects: visual cards with an image of real work (or a gold icon tile), built by pricing-menu.js. */
.pm-offers { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; margin-top: 32px; }
.ways-to-work .pm-offers .pm-offer {
  position: relative; display: flex; flex-direction: column; gap: 10px; margin: 0; padding: 0 0 24px; min-height: 0;
  border: 1px solid rgba(193, 161, 116, .3); border-radius: 16px; background: rgba(7, 12, 18, .92); overflow: hidden; box-shadow: none; text-align: left;
  transition: border-color .3s ease, transform .3s ease;
}
.ways-to-work .pm-offers .pm-offer::before { display: none; }
.ways-to-work .pm-offers .pm-offer:hover { border-color: #e1c69d; transform: translateY(-3px); }
.pm-offer-media { margin: 0 0 6px; aspect-ratio: 16 / 10; overflow: hidden; background: #0f1720; }
.pm-offer-media img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 0; transition: transform .6s ease; }
.pm-offer:hover .pm-offer-media img { transform: scale(1.04); }
.pm-offer-media.is-icon { display: grid; place-items: center; background: radial-gradient(circle at 50% 45%, rgba(193, 161, 116, .2), transparent 62%), #0b121a; }
.pm-offer-media.is-icon::after { content: ""; width: 64px; height: 64px; background: #e1c69d; -webkit-mask: var(--ic) center / contain no-repeat; mask: var(--ic) center / contain no-repeat; }
.ways-to-work .pm-offers .pm-offer > :not(.pm-offer-media) { margin-left: 24px; margin-right: 24px; }
.ways-to-work .pm-offers .pm-offer .ways-to-work-start { margin-top: 0; margin-bottom: -4px; font-size: .7rem; letter-spacing: .18em; text-transform: uppercase; color: #e1c69d; }
.ways-to-work .pm-offers .pm-offer h3 { margin-top: 0; margin-bottom: 0; font-family: var(--font-display); text-transform: uppercase; letter-spacing: .02em; font-size: 1.4rem; line-height: 1.1; color: #f0e8d9; }
.ways-to-work .pm-offers .pm-offer .ways-to-work-price { margin-top: 0; margin-bottom: 0; font-family: var(--font-display); font-size: 1.9rem; line-height: 1.1; color: #e1c69d; white-space: normal; }
.ways-to-work .pm-offers .pm-offer > p:not([class]) { margin-top: 0; margin-bottom: 0; color: #c0c8cf; font-size: .93rem; line-height: 1.55; }
.pm-offer-more { border: 0; padding: 0; background: none; }
.pm-offer-more summary { cursor: pointer; list-style: none; font-size: .72rem; letter-spacing: .16em; text-transform: uppercase; color: #9fa9b3; padding: 4px 0; }
.pm-offer-more summary::-webkit-details-marker { display: none; }
.pm-offer-more summary::after { content: " +"; color: #e1c69d; }
.pm-offer-more[open] summary::after { content: " −"; }
.pm-offer-more ul { margin: 8px 0 0; padding-left: 18px; color: #f0e8d9; font-size: .9rem; line-height: 1.5; }
.pm-offer-more p { margin: 8px 0 0; color: #9fa9b3; font-size: .82rem; }
.ways-to-work .pm-offers .pm-offer .btn { align-self: flex-start; margin-top: auto; }
@media (max-width: 1000px) { .pm-offers { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .pm-offers { grid-template-columns: 1fr; } }

/* Flat to Booked: the plan ad, 9:16, beside a short caption */
.plans-film{display:grid;grid-template-columns:minmax(0,300px) minmax(0,1fr);gap:clamp(20px,4vw,48px);align-items:center;margin:0 0 clamp(28px,4vw,44px);text-align:left}
.plans-film video{display:block;width:100%;height:auto;aspect-ratio:9/16;border-radius:18px;border:1px solid rgba(193,161,116,.35);background:#0a1017;object-fit:cover;box-shadow:0 24px 60px rgba(0,0,0,.35)}
.plans-film figcaption{display:grid;gap:10px;max-width:440px}
.plans-film-kicker{font-size:.75rem;letter-spacing:.16em;text-transform:uppercase;color:#c1a174}
.plans-film strong{font-family:Georgia,serif;font-style:italic;font-weight:400;font-size:clamp(1.6rem,3vw,2.3rem);line-height:1.15;color:#e1c69d}
.plans-film figcaption span:last-child{color:#9fa9b3;line-height:1.55}
.ways-to-work-intro .plans-film{margin:clamp(28px,4vw,40px) auto 0;max-width:820px}
@media (max-width:640px){
  .plans-film{grid-template-columns:1fr;justify-items:center;text-align:center}
  .plans-film video{max-width:320px}
  .plans-film figcaption{justify-items:center}
}
/* Three monthly plans (Starter, The MVTJ Plan, Front Desk) sit side by side on wide screens. */
@media (min-width: 1200px) { .pm-plans { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; } }