/* Extra styles for /projects, /resources, /contact (loaded after site.css). */

/* Inner-page hero: Wix placed the title lower than on home */
.hero__content { padding-top: 184px; }
.note { max-width: 990px; margin-left: auto; margin-right: auto; }

/* ---------- Projects ---------- */
.b3-title30 { font-size: 30px; }
.b3-howto__list { max-width: 945px; margin: 0 auto; padding-left: 30px; }
.b3-howto .sec-head { margin-bottom: 22px; }
.b3-howto .sec-foot { margin-top: 38px; }

.b3-case { padding: 70px 0 115px; }
.b3-case__head { text-align: center; margin-bottom: 38px; }
.b3-case__title { font: 400 60px/1.4 var(--font-display); color: #fff; }
.b3-case__head p { font-size: 15px; margin-top: 6px; }
.b3-case__pics { display: grid; grid-template-columns: 538fr 524fr; gap: 28px; }

/* Wix-style crop: the box keeps the crop's aspect, the image is scaled and shifted inside it */
.crop { overflow: hidden; width: 100%; }
.crop__img { display: block; max-width: none; height: auto; }

.b3-gal { padding: 56px 0 92px; }
.b3-gal .sec-head { margin-bottom: 52px; }
.b3-head--interior { max-width: 770px; }

/* Pro Gallery look: columns of two tiles, sliding row with arrows */
.pg { position: relative; }
.pg__track {
  display: flex; gap: 2px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth;
  scrollbar-width: none; -ms-overflow-style: none;
}
.pg__track::-webkit-scrollbar { display: none; }
.pg__col {
  --cw: 271;
  flex: 0 0 calc((100% - 6px) / 4 * var(--cw) / 271);
  display: flex; flex-direction: column; gap: 2px; scroll-snap-align: start;
}
.pg__item { position: relative; display: block; overflow: hidden; background: #ddd; text-decoration: none; }
.pg__img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1); transition: filter .3s; }
.pg__item:hover .pg__img, .pg__item:focus-visible .pg__img { filter: none; } /* Wix: black-and-white, colour on hover */
.pg__col--last { justify-content: flex-start; } /* Wix: odd last photo 226x306 at the top, empty below */
/* Wix hover text: title (Abel 25/35) + description (Manrope 16/25.6), white, centered, 30px inset, clipped */
.pg__info {
  position: absolute; inset: 0; padding: 30px; display: flex; flex-direction: column; align-items: center; gap: 6px;
  text-align: center; color: #fff; opacity: 0; transition: opacity .3s; overflow: hidden; pointer-events: none;
}
.pg__item:hover .pg__info, .pg__item:focus-visible .pg__info { opacity: 1; }
.pg__title { display: block; font: 400 25px/35px var(--font-display); }
.pg__desc {
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 9; overflow: hidden;
  font: 400 16px/25.6px var(--font);
}
.pg__item--s .pg__desc, .pg__col--last .pg__desc { -webkit-line-clamp: 4; }
.pg__arrow {
  position: absolute; top: 50%; width: 23px; height: 39px; margin-top: -19.5px; padding: 0;
  border: 0; background: transparent; cursor: pointer; color: #fff;
  filter: drop-shadow(0 0 2px rgba(0, 0, 0, .6));
}
.pg__arrow[hidden] { display: none; }
.pg__arrow::before {
  content: ""; display: block; width: 100%; height: 100%; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 23 39'%3E%3Cpath d='M2.005 1.479L3.5 0l18.124 18-18.127 18-1.49-1.48L18.638 18Z'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 23 39'%3E%3Cpath d='M2.005 1.479L3.5 0l18.124 18-18.127 18-1.49-1.48L18.638 18Z'/%3E%3C/svg%3E") center / contain no-repeat;
}
.pg__arrow--next { right: 24px; }
.pg__arrow--prev { left: 24px; transform: scaleX(-1); }

/* Lightbox (opened by /js/b3.js) */
.lb { border: 0; padding: 0; margin: 0; width: 100vw; height: 100vh; max-width: none; max-height: none; background: rgba(255, 255, 255, .97); }
.lb::backdrop { background: rgba(255, 255, 255, .97); }
.lb__img { position: absolute; inset: 60px 80px; width: calc(100% - 160px); height: calc(100% - 120px); max-width: none; object-fit: contain; }
/* Photo with a caption: Wix puts the photo left (90..917 of 1440) and a text panel right (from x=1012, ~320 wide) */
.lb--info .lb__img { inset: 74px auto 74px 90px; width: calc(100% - 613px); height: calc(100% - 148px); }
.lb__info { display: none; position: absolute; top: 132px; left: calc(100% - 428px); width: 320px; color: #010101; }
.lb--info .lb__info { display: block; }
.lb__title { font: 500 28px/38px var(--font); margin: 0 0 18px; color: #010101; }
.lb__desc { font: 400 16px/25.6px var(--font); margin: 0; }
.lb--info .lb__next { right: auto; left: calc(100% - 500px); }
.lb__btn { position: absolute; border: 0; background: transparent; cursor: pointer; color: #010101; padding: 10px; }
.lb__btn svg { width: 100%; height: 100%; fill: currentColor; }
.lb__close { top: 14px; right: 14px; width: 44px; height: 44px; }
.lb__prev, .lb__next { top: 50%; width: 44px; height: 64px; margin-top: -32px; }
.lb__prev { left: 16px; transform: scaleX(-1); }
.lb__next { right: 16px; }

.b3-why__list { max-width: 945px; margin: 0 auto; }
.b3-why__list li { margin-bottom: 18px; }
.b3-goal { font-size: 22px; font-weight: 600; line-height: 1.4; max-width: 990px; margin: 54px auto 0; }

.b3-faq { max-width: 990px; }
.b3-btn-wide { min-width: 378px; }

/* ---------- Resources ---------- */
.b3-lib { gap: 32px 50px; }
@media (min-width: 1061px) {
  .b3-res-page > .sec { padding-top: 70px; } /* Wix: section headings ~70px below the section top */
  .b3-lib { grid-template-columns: repeat(3, 310px); justify-content: center; gap: 32px 44px; margin: 0 -14px; }
}
.b3-lib .icon-row__icon { width: 74px; height: 74px; margin-bottom: 26px; }
.b3-lib .icon-row__title { font-size: 21px; font-weight: 600; margin-bottom: 10px; }
.b3-lib .bullets { padding-left: 29px; }
.b3-res { max-width: 1110px; margin: 0 auto; gap: 26px; }
.b3-res .card { padding: 26px 23px 18px; }
.b3-res .card__title { font-size: 23px; font-weight: 500; margin-bottom: 14px; }
.b3-res .card p { margin-bottom: 14px; }
.b3-res .checklist { margin-bottom: 26px; }
.b3-res .checklist li { margin-bottom: 10px; }
.b3-res .card .btn { align-self: stretch; }
.b3-card--soft { background: #F9F9F9; }
.b3-glossary { display: grid; grid-template-columns: 1fr 1fr; gap: 0 30px; max-width: 1000px; margin: 0 auto; }
.b3-intro-narrow { max-width: 660px; margin: 0 auto; }
.faq--light.b3-faq summary { color: var(--ink); }
.faq--light.b3-faq .faq__a { color: #9b9b9b; }
.b3-official { max-width: 617px; margin: 0 auto; }
.b3-official .b3-official__link:first-child { margin-top: -12px; }
.b3-official__link { font-size: 23px; font-weight: 600; line-height: 1.4; margin: 0 0 12px; }
.b3-official__link a { text-decoration: underline; text-underline-offset: 3px; }
.b3-official .checklist { margin-bottom: 14px; }
.b3-official .checklist li { margin-bottom: 0; }
.b3-onesec { max-width: 1000px; margin-bottom: 0; }
.b3-onesec .sec-title { margin-bottom: 18px; }
.b3-onesec p { margin-bottom: 30px; }
.b3-onesec p:first-of-type { margin-bottom: 26px; }
.b3-onesec__close { font-size: 26px; font-weight: 600; line-height: 1.4; margin-top: 46px; }

/* ---------- Contact ---------- */
.b3-hero-btns .btn { min-width: 197px; }
.b3-hero-btns .btn--outline-light { min-width: 256px; }
.b3-formsec { background: #fff; padding: 72px 0 12px; }
.b3-formsec .sec-head { margin-bottom: 36px; }

.cform { max-width: 942px; margin: 0 auto; background: var(--grey-band); padding: 18px 24px 12px; color: var(--ink); font-size: 14px; }
.cform__hp { position: absolute !important; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.cform__row { display: grid; grid-template-columns: 1fr 1fr; gap: 0 24px; }
.cform__field { margin-bottom: 21px; }
.cform label, .cform__label, .cform legend { display: block; font-size: 14px; line-height: 1.4; margin-bottom: 10px; color: var(--ink); }
.cform__req { margin-left: 2px; }
.cform input[type="text"], .cform input[type="email"], .cform input[type="tel"], .cform select, .cform textarea {
  display: block; width: 100%; height: 36px; padding: 0 12px; border: 1px solid transparent; border-radius: 0;
  background: #fff; color: var(--ink); font: 400 15px/1.4 var(--font);
}
.cform textarea { height: 92px; padding: 10px 12px; resize: none; }
.cform ::placeholder { color: #6b6b6b; opacity: 1; }
.cform input:focus, .cform select:focus, .cform textarea:focus { outline: none; border-color: #010101; }
.cform select {
  appearance: none; -webkit-appearance: none; padding-right: 40px; cursor: pointer;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23010101' d='M18.25 8.18l.71.71-6.37 6.37-.7.7-.71-.7-6.36-6.37.7-.71 6.37 6.36z'/%3E%3C/svg%3E") no-repeat right 12px center / 20px;
}
.cform__phone { position: relative; }
.cform__cc { position: absolute; left: 12px; top: 0; bottom: 0; display: flex; align-items: center; gap: 2px; pointer-events: none; }
.cform__cc svg { width: 20px; height: 10px; }
.cform__cc .cform__cc-chev { width: 14px; height: 14px; fill: #010101; }
.cform__phone input[type="tel"] { padding-left: 52px; }
.cform__section { font: 400 25px/1.4 var(--font-display); color: var(--ink); margin: 4px 0 22px; }
.cform__radios { border: 0; padding: 0; margin: 0 0 18px; display: grid; grid-template-columns: 1fr 1fr; gap: 6px 24px; }
.cform__radios legend { padding: 0; margin-bottom: 8px; }
.cform__radios label { display: flex; align-items: center; gap: 12px; margin: 0; font-size: 14px; min-height: 30px; cursor: pointer; }
.cform input[type="radio"] {
  appearance: none; -webkit-appearance: none; flex: none; width: 18px; height: 18px; margin: 0;
  border: 2px solid #010101; border-radius: 50%; background: #fff; display: grid; place-content: center; cursor: pointer;
}
.cform input[type="radio"]::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #010101; transform: scale(0); transition: transform .1s; }
.cform input[type="radio"]:checked::before { transform: scale(1); }
.cform__note { font-size: 14px; margin: 2px 0 20px; }
.cform__field--file { margin-bottom: 16px; }
.cform__file {
  position: relative; display: inline-flex !important; align-items: center; height: 40px; margin: 0 !important; padding: 0 16px 0 44px;
  background: #010101; color: #fff !important; font-size: 16px !important; cursor: pointer;
}
.cform__file { transition: background-color .2s; }
.cform__file:hover { background: var(--red); } /* Wix: red on hover */
.cform__file:focus-within { outline: 2px solid var(--red); outline-offset: 2px; }
.cform__file input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; font-size: 0; }
.cform__files { display: block; margin-top: 8px; font-size: 13px; color: var(--text); }
.cform__files:empty { display: none; }
.cform__check { display: flex !important; align-items: center; gap: 12px; margin: 0 0 22px !important; cursor: pointer; }
.cform input[type="checkbox"] {
  appearance: none; -webkit-appearance: none; flex: none; width: 18px; height: 18px; margin: 0;
  border: 2px solid #010101; background: #fff; display: grid; place-content: center; cursor: pointer;
}
.cform input[type="checkbox"]::before { content: ""; width: 10px; height: 6px; border: 2px solid #010101; border-top: 0; border-right: 0; transform: rotate(-45deg) scale(0); margin-top: -2px; }
.cform input[type="checkbox"]:checked::before { transform: rotate(-45deg) scale(1); }
.cform input[type="radio"]:focus-visible, .cform input[type="checkbox"]:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; }
.cform__submit { display: flex; width: 100%; min-height: 40px; text-transform: none; font-size: 16px; }
.cform__submit:hover { letter-spacing: normal; }
.cform__submit[disabled] { opacity: .6; cursor: wait; }
.cform__err { display: flex; align-items: center; gap: 6px; margin: 8px 0 0; color: #DF3131; font-size: 14px; line-height: 1.4; }
.cform__err svg { flex: none; width: 14px; height: 14px; }
.cform__status { min-height: 1.4em; margin: 10px 0 0; font-size: 15px; text-align: center; }
.cform__status--ok { color: #1f7a35; }
.cform__status--err { color: #c4161a; }

.b3-enq { max-width: 1000px; margin: 0 auto; gap: 26px; }
.b3-enq .card { padding: 34px 36px 34px; }
.b3-enq .card__title { font-size: 23px; font-weight: 500; margin-bottom: 14px; }
.b3-enq .bullets { margin-bottom: 18px; }

.b3-direct { max-width: 990px; margin: 0 auto; padding-left: 0; display: grid; grid-template-columns: 1fr minmax(0, 608px); grid-template-rows: auto auto 1fr; column-gap: 27px; align-items: start; }
.b3-direct > :not(.b3-direct__mapimg) { grid-column: 1; }
.b3-direct__mapimg { grid-column: 2; grid-row: 1 / span 3; display: block; }
.b3-direct__mapimg img { width: 100%; max-width: 608px; height: auto; aspect-ratio: 608 / 280; }
.b3-direct__list { list-style: none; margin: 40px 0 18px; }
.b3-direct__list li { display: flex; align-items: center; gap: 14px; margin-bottom: 15px; color: var(--ink); font-size: 16px; }
.b3-direct__list svg { flex: none; width: 14px; height: 14px; fill: var(--red); }
.b3-direct__list a { text-decoration: none; }
.b3-direct__list a[href^="mailto"] { text-decoration: underline; }
.b3-direct__map:hover { text-decoration: underline; }
.b3-direct__hours { max-width: 350px; }
.b3-intro-750 { max-width: 750px; margin: 0 auto; }

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  .b3-glossary { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .hero__content { padding-top: calc(var(--header-h) + 40px); }
  .b3-case { padding: 56px 0; }
  .b3-case__title { font-size: 40px; }
  .b3-case__pics { grid-template-columns: 1fr; gap: 16px; }
  .b3-gal { padding: 56px 0; }
  .b3-gal .sec-head { margin-bottom: 30px; }
  .pg__col { flex-basis: calc((100% - 2px) / 2 * var(--cw) / 271); }
  .pg__arrow--next { right: 10px; }
  .pg__arrow--prev { left: 10px; }
  .lb__img { inset: 60px 10px; width: calc(100% - 20px); }
  .lb__prev, .lb__next { top: auto; bottom: 10px; margin-top: 0; }
  .lb--info .lb__img { inset: 60px 10px auto; width: calc(100% - 20px); height: 55vh; }
  .lb__info { top: calc(60px + 55vh + 20px); left: 20px; width: auto; right: 20px; }
  .lb__title { font-size: 22px; line-height: 30px; margin-bottom: 10px; }
  .lb--info .lb__next { left: auto; right: 16px; }
  .b3-btn-wide { min-width: 0; }
  .b3-goal { font-size: 20px; }
  .b3-lib .bullets { padding-left: 20px; }
  .b3-official__link { font-size: 20px; }
  .b3-onesec__close { font-size: 22px; }
  .cform { padding: 18px 16px 12px; }
  .cform__row, .cform__radios { grid-template-columns: 1fr; }
  .b3-hero-btns .btn, .b3-hero-btns .btn--outline-light { min-width: 0; }
  .b3-enq .card { padding: 26px 22px; }
  .b3-direct { grid-template-columns: 1fr; grid-template-rows: none; }
  .b3-direct__list { margin-top: 10px; }
  .b3-direct__mapimg { grid-column: 1; grid-row: auto; margin-top: 16px; order: 1; }
  .b3-direct__mapimg img { width: 100%; height: auto; }
}