/* D'cent Roof portfolio collection. All rules are scoped to dcrfolio33. */
.dcrfolio33 {
  --dcrfolio33-ink: #302d27;
  --dcrfolio33-muted: #746d62;
  --dcrfolio33-line: #e4ded3;
  --dcrfolio33-gold: #b88c49;
  --dcrfolio33-paper: #faf9f6;
  color: var(--dcrfolio33-ink);
  background: var(--dcrfolio33-paper);
  width: 100%;
  overflow: clip;
}
.dcrfolio33 *, .dcrfolio33 *::before, .dcrfolio33 *::after { box-sizing: border-box; }
.dcrfolio33 a { color: inherit; text-decoration: none; }
.dcrfolio33 img { display: block; max-width: 100%; }
.dcrfolio33 button { font: inherit; }
.dcrfolio33 :focus-visible { outline: 3px solid var(--dcrfolio33-gold); outline-offset: 5px; }
.dcrfolio33-wrap { width: min(1360px, calc(100% - 64px)); margin-inline: auto; }
.dcrfolio33-opening { padding: 30px 0 0; }
.dcrfolio33-breadcrumb { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 43px; font-size: 12px; line-height: 1.7; color: var(--dcrfolio33-muted); }
.dcrfolio33-breadcrumb [aria-hidden] { opacity: .5; }
.dcrfolio33-title-row { display: grid; grid-template-columns: 1.15fr .85fr; align-items: end; gap: 55px; margin-bottom: 35px; }
.dcrfolio33-label { display: flex; align-items: center; gap: 11px; margin: 0 0 18px; color: #98723c; font-size: 11px; line-height: 1.7; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; }
.dcrfolio33-label::before { content: ""; width: 27px; height: 1px; background: currentColor; flex-shrink: 0; }
.dcrfolio33-title { margin: 0; font-family: Georgia, "Times New Roman", serif; font-size: clamp(55px, 7.2vw, 108px); font-weight: 400; line-height: .99; letter-spacing: -.065em; color: var(--dcrfolio33-ink); }
.dcrfolio33-lead { max-width: 405px; justify-self: end; }
.dcrfolio33-lead p { margin: 0 0 20px; color: var(--dcrfolio33-muted); font-size: 15px; line-height: 1.9; }
.dcrfolio33-textlink { display: inline-flex; align-items: center; gap: 20px; padding: 9px 0; border-bottom: 1px solid #baa98e; font-size: 12px; font-weight: 600; line-height: 1.6; }
.dcrfolio33 svg { display: block; width: 19px; height: 19px; flex-shrink: 0; }
.dcrfolio33-textlink svg, .dcrfolio33-button svg { transition: transform .3s ease; }
.dcrfolio33-textlink:hover svg, .dcrfolio33-button:hover svg { transform: translateX(4px); }
.dcrfolio33-hero { position: relative; height: clamp(410px, 47vw, 660px); margin: 0; overflow: hidden; border-radius: 7px; background: #4e4e42; }
.dcrfolio33-hero > img { width: 100%; height: 100%; object-fit: cover; }
.dcrfolio33-hero::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, #20281c05 25%, #1c241733 62%, #1c2417bc 100%); }
.dcrfolio33-hero-caption { position: absolute; z-index: 1; inset: auto 38px 32px; display: flex; align-items: end; justify-content: space-between; gap: 30px; color: #fff; }
.dcrfolio33-hero-caption p { max-width: 570px; margin: 0; color: #fff; font-family: Georgia, serif; font-size: clamp(28px, 3vw, 45px); font-weight: 400; line-height: 1.16; letter-spacing: -.025em; }
.dcrfolio33-hero-link { display: inline-flex; align-items: center; gap: 15px; flex-shrink: 0; border: 1px solid #ffffff80; border-radius: 4px; padding: 13px 18px; color: #fff !important; font-size: 12px; }
.dcrfolio33-categories { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 23px; padding: 23px 0; border-bottom: 1px solid var(--dcrfolio33-line); }
.dcrfolio33-categories a { position: relative; padding: 4px 0; color: var(--dcrfolio33-muted); font-size: 12px; line-height: 1.6; transition: color .25s ease; }
.dcrfolio33-categories a[aria-current], .dcrfolio33-categories a:hover { color: #916a33; }
.dcrfolio33-categories a[aria-current]::after { content: ""; position: absolute; left: 0; right: 0; bottom: -5px; height: 1px; background: #b88c49; }
.dcrfolio33-story { padding: 85px 0; }
.dcrfolio33-story-grid { display: grid; grid-template-columns: .45fr 1.55fr; gap: 65px; }
.dcrfolio33-heading { margin: 0; color: var(--dcrfolio33-ink); font-family: Georgia, "Times New Roman", serif; font-size: clamp(35px, 4vw, 57px); font-weight: 400; line-height: 1.14; letter-spacing: -.045em; }
.dcrfolio33-heading em { color: #99743e; font-weight: 400; }
.dcrfolio33-paragraphs { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; margin-top: 24px; }
.dcrfolio33-paragraphs p, .dcrfolio33-section-top > p { margin: 0; color: var(--dcrfolio33-muted); font-size: 15px; line-height: 1.9; }
.dcrfolio33-gallery-section { padding: 75px 0 80px; background: #efede7; border-block: 1px solid var(--dcrfolio33-line); scroll-margin-top: 90px; }
.dcrfolio33-section-top { display: flex; align-items: end; justify-content: space-between; gap: 40px; margin-bottom: 35px; }
.dcrfolio33-section-top > p { max-width: 330px; font-size: 14px; }
.dcrfolio33-gallery { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 20px; }
.dcrfolio33-shot { position: relative; display: block; grid-column: span var(--dcrfolio33-span, 4); height: var(--dcrfolio33-height, 310px); overflow: hidden; border-radius: 5px; background: #d2cbbd; isolation: isolate; }
.dcrfolio33-shot img { width: 100%; height: 100%; object-fit: cover; transition: transform .85s cubic-bezier(.2,.65,.25,1); }
.dcrfolio33-shot::after { content: ""; position: absolute; inset: 0; z-index: 0; background: linear-gradient(180deg, #151e1200 40%, #151e1244 75%, #151e12ae); pointer-events: none; }
.dcrfolio33-shot:hover img, .dcrfolio33-shot:focus-visible img { transform: scale(1.045); }
.dcrfolio33-shot-number { position: absolute; z-index: 1; top: 18px; left: 19px; color: #fff; font-size: 10px; letter-spacing: .13em; text-shadow: 0 1px 6px #0008; }
.dcrfolio33-shot-caption { position: absolute; z-index: 1; left: 22px; right: 22px; bottom: 20px; display: flex; align-items: center; justify-content: space-between; gap: 15px; color: #fff; font-size: 13px; }
.dcrfolio33-shot-caption > span:last-child { display: grid; place-items: center; width: 35px; height: 35px; border: 1px solid #ffffff8c; border-radius: 50%; }
.dcrfolio33-related { padding: 85px 0; }
.dcrfolio33-card-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.dcrfolio33-card { display: flex; flex-direction: column; min-width: 0; overflow: hidden; border: 1px solid var(--dcrfolio33-line); border-radius: 6px; background: #faf9f6; transition: box-shadow .35s ease, transform .35s ease; }
.dcrfolio33-card:hover { transform: translateY(-4px); box-shadow: 0 15px 30px #332e2109; }
.dcrfolio33-card-photo { position: relative; overflow: hidden; background: #d2cbbd; }
.dcrfolio33-card-photo img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; transition: transform .8s ease; }
.dcrfolio33-card:hover img { transform: scale(1.045); }
.dcrfolio33-card-body { display: flex; flex: 1; flex-direction: column; align-items: flex-start; padding: 24px; }
.dcrfolio33-card h3 { margin: 0 0 12px; font-family: Georgia, serif; font-size: 28px; font-weight: 400; line-height: 1.15; letter-spacing: -.025em; color: var(--dcrfolio33-ink); }
.dcrfolio33-card p { margin: 0 0 20px; color: var(--dcrfolio33-muted); font-size: 13px; line-height: 1.8; }
.dcrfolio33-card .dcrfolio33-textlink { margin-top: auto; }
.dcrfolio33-overview { padding: 70px 0 85px; scroll-margin-top: 90px; }
.dcrfolio33-overview .dcrfolio33-card:last-child:nth-child(3n + 1) { grid-column: 2; }
.dcrfolio33-banner-section { padding: 0 0 85px; }
.dcrfolio33-banner { position: relative; isolation: isolate; overflow: hidden; display: grid; grid-template-columns: 1.2fr .8fr; align-items: end; gap: 45px; padding: 50px; border-radius: 6px; background: #5c4b38; color: #fff; }
.dcrfolio33-banner > img { position: absolute; z-index: -2; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.dcrfolio33-banner::before { content: ""; position: absolute; z-index: -1; inset: 0; background: linear-gradient(105deg, #3c3429f5, #3c3429d9 65%, #3c3429a6); }
.dcrfolio33-banner .dcrfolio33-label { color: #e4c89e; }
.dcrfolio33-banner .dcrfolio33-heading { color: #fff; max-width: 650px; font-size: clamp(33px, 3.4vw, 47px); }
.dcrfolio33-banner p { max-width: 580px; margin: 20px 0 0; color: #e4dfd6; font-size: 14px; line-height: 1.85; }
.dcrfolio33-banner-actions { display: flex; flex-direction: column; align-items: flex-start; gap: 20px; justify-self: end; }
.dcrfolio33-button { position: relative; isolation: isolate; display: inline-flex; align-items: center; justify-content: space-between; gap: 22px; min-height: 54px; padding: 15px 23px; overflow: hidden; border: 1px solid #cba46b; border-radius: 4px; background: linear-gradient(120deg, #956e39, #b88c49, #a37b40); color: #fff !important; font-size: 13px; font-weight: 600; line-height: 1.6; }
.dcrfolio33-button::before { content: ""; position: absolute; z-index: -1; inset: -50% auto -50% -70%; width: 45%; background: linear-gradient(90deg, transparent, #ffffff35, transparent); transform: skewX(-20deg); transition: left .7s ease; }
.dcrfolio33-button:hover::before { left: 130%; }
.dcrfolio33-banner-actions > a:last-child { color: #fff; font-size: 13px; line-height: 1.7; }
.dcrfolio33-lightbox { position: fixed; inset: 0; z-index: 2147483000; width: min(1200px, calc(100% - 40px)); max-width: none; max-height: calc(100dvh - 32px); margin: auto; padding: 0; overflow: auto; border: 1px solid #ffffff26; border-radius: 7px; background: #20241f; color: #fff; box-shadow: 0 25px 90px #0005; }
.dcrfolio33-lightbox::backdrop { background: #11150fe8; }
.dcrfolio33-lightbox-top { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 15px 20px; border-bottom: 1px solid #ffffff20; }
.dcrfolio33-lightbox-top h2 { margin: 0; font-family: inherit; font-size: 13px; font-weight: 500; line-height: 1.6; color: #fff; }
.dcrfolio33-lightbox button { display: grid; place-items: center; width: 40px; height: 40px; flex-shrink: 0; padding: 9px; border: 1px solid #ffffff40; border-radius: 50%; background: transparent; color: #fff; cursor: pointer; }
.dcrfolio33-lightbox button:hover { background: #ffffff15; }
.dcrfolio33-lightbox button:disabled { opacity: .3; cursor: default; }
.dcrfolio33-lightbox-stage { position: relative; display: grid; place-items: center; min-height: 220px; background: #151914; }
.dcrfolio33-lightbox-stage img { width: 100%; height: auto; max-height: calc(100dvh - 190px); object-fit: contain; }
.dcrfolio33-lightbox-stage p { padding: 25px; margin: 0; color: #e4dfd6; font-size: 14px; }
.dcrfolio33-lightbox-bottom { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 14px 20px; }
.dcrfolio33-lightbox-bottom p { margin: 0; font-size: 12px; line-height: 1.7; color: #deded7; }
.dcrfolio33-lightbox-controls { display: flex; gap: 9px; }
.dcrfolio33-lightbox [hidden] { display: none !important; }
@media (prefers-reduced-motion: no-preference) {
  .dcrfolio33 [data-dcrfolio33-reveal] { transition: opacity .8s ease, transform .8s cubic-bezier(.2,.65,.25,1); }
  .dcrfolio33 [data-dcrfolio33-reveal].dcrfolio33-waiting { opacity: 0; transform: translateY(27px); }
}
@media (max-width: 1000px) {
  .dcrfolio33-title-row { gap: 30px; }
  .dcrfolio33-story-grid { grid-template-columns: .4fr 1.6fr; gap: 30px; }
  .dcrfolio33-banner { padding: 36px; gap: 30px; }
}
@media (max-width: 850px) {
  .dcrfolio33-wrap { width: calc(100% - 42px); }
  .dcrfolio33-title { font-size: clamp(52px, 8vw, 78px); }
  .dcrfolio33-title-row { grid-template-columns: 1fr 1fr; }
  .dcrfolio33-lead p { font-size: 14px; }
  .dcrfolio33-shot { grid-column: span 6; height: auto; aspect-ratio: 4 / 3; }
  .dcrfolio33-card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dcrfolio33-overview .dcrfolio33-card:last-child:nth-child(3n + 1) { grid-column: auto; }
  .dcrfolio33-story-grid { grid-template-columns: 1fr; gap: 12px; }
  .dcrfolio33-banner { grid-template-columns: 1fr; }
  .dcrfolio33-banner-actions { justify-self: start; }
}
@media (max-width: 600px) {
  .dcrfolio33-wrap { width: calc(100% - 36px); }
  .dcrfolio33-opening { padding-top: 24px; }
  .dcrfolio33-breadcrumb { margin-bottom: 32px; }
  .dcrfolio33-title-row { grid-template-columns: 1fr; gap: 23px; margin-bottom: 27px; }
  .dcrfolio33-title { font-size: clamp(48px, 14vw, 65px); }
  .dcrfolio33-lead { max-width: none; justify-self: start; }
  .dcrfolio33-hero { height: 460px; }
  .dcrfolio33-hero-caption { inset: auto 23px 24px; display: block; }
  .dcrfolio33-hero-link { margin-top: 24px; }
  .dcrfolio33-categories { gap: 8px 18px; padding: 22px 0; }
  .dcrfolio33-categories a { font-size: 11px; }
  .dcrfolio33-story, .dcrfolio33-related { padding: 55px 0; }
  .dcrfolio33-paragraphs { grid-template-columns: 1fr; gap: 17px; }
  .dcrfolio33-paragraphs p { font-size: 14px; }
  .dcrfolio33-gallery-section { padding: 50px 0; }
  .dcrfolio33-section-top { display: block; margin-bottom: 27px; }
  .dcrfolio33-section-top > p { max-width: none; margin-top: 20px; }
  .dcrfolio33-gallery { gap: 17px; }
  .dcrfolio33-shot { grid-column: span 12; }
  .dcrfolio33-shot-caption { left: 18px; right: 18px; bottom: 17px; }
  .dcrfolio33-card-grid { grid-template-columns: 1fr; gap: 20px; }
  .dcrfolio33-card-body { padding: 23px; }
  .dcrfolio33-overview { padding: 50px 0; }
  .dcrfolio33-banner-section { padding-bottom: 55px; }
  .dcrfolio33-banner { padding: 30px 24px; }
  .dcrfolio33-lightbox { width: calc(100% - 20px); max-height: calc(100dvh - 20px); }
  .dcrfolio33-lightbox-top, .dcrfolio33-lightbox-bottom { padding: 12px 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .dcrfolio33 *, .dcrfolio33 *::before, .dcrfolio33 *::after { transition: none !important; animation: none !important; }
}