/* Before and after gallery. Site plan "Before and after gallery"; design plan: drawn to measure, 8px / 3px. */
.wf .gl-open__head, .wf .gl-hero { visibility: hidden; }
.js .gl-in { opacity: 0; transform: translate3d(0, 18px, 0); }
.no-js .gl-in, .rm .gl-in, .reveal-safe .gl-in { opacity: 1; transform: none; }

/* ---------- comparison (opener, cards, lightbox) ---------- */
.gl-cmp { position: relative; overflow: hidden; border-radius: var(--r); background: var(--graphite-3); touch-action: pan-y; user-select: none; -webkit-user-select: none; cursor: ew-resize; }
.gl-cmp__set { position: absolute; inset: 0; opacity: 0; visibility: hidden; }
.gl-cmp__set.is-on { opacity: 1; visibility: visible; }
.gl-cmp__in { position: absolute; inset: 0; transform-origin: 50% 50%; }
.gl-cmp img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: var(--op, 50% 50%); pointer-events: none; -webkit-user-drag: none; }
.gl-cmp__a { position: absolute; inset: 0; clip-path: inset(0 0 0 var(--x, 50%)); }
/* the line and handle ride on a full-width layer moved by transform (not left), so moving them never shifts layout */
.gl-cmp__pos { position: absolute; inset: 0; z-index: 3; pointer-events: none; transform: translate3d(var(--x, 50%), 0, 0); }
.gl-cmp__line { position: absolute; top: 0; bottom: 0; left: 0; width: 2px; margin-left: -1px; background: #fff; box-shadow: 0 0 0 1px rgba(0, 0, 0, .14); pointer-events: none; }
.gl-cmp__handle { position: absolute; top: 50%; left: 0; pointer-events: auto; width: 48px; height: 48px; margin: -24px 0 0 -24px; border-radius: var(--rb); background: #fff; border: 0; display: grid; place-items: center; box-shadow: 0 6px 18px rgba(0, 0, 0, .28); cursor: ew-resize; touch-action: none; }
.gl-cmp__handle svg { width: 22px; height: 12px; } .gl-cmp__handle path { fill: none; stroke: var(--graphite); stroke-width: 1.8; }
.gl-tag { position: absolute; top: 12px; z-index: 3; padding: 6px 10px; border-radius: calc(var(--r) - 3px); background: rgba(28, 33, 37, .86); color: #fff; font-size: .875rem; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; font-stretch: 85%; pointer-events: none; }
.gl-tag--b { left: 12px; } .gl-tag--a { right: 12px; background: rgba(181, 129, 79, .95); color: var(--graphite); }

/* ---------- OPENER ---------- */
.gl-open { position: relative; overflow: clip; isolation: isolate; color: var(--silver-hi); padding: calc(var(--hdr) + clamp(20px, 2.4vw, 36px)) 0 clamp(26px, 3vw, 44px); }
.gl-open__head { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 72px); align-items: end; margin-bottom: clamp(20px, 2.4vw, 34px); }
.gl-crumb { font-size: .9rem; color: var(--muted-d); margin-bottom: 14px; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; }
.gl-crumb a { display: inline-flex; align-items: center; min-height: 44px; margin: -12px 0; color: var(--silver-hi); text-decoration: none; }
.gl-crumb a:hover { color: var(--oak-hi); }
.gl-crumb [aria-current] { color: var(--oak-hi); }
.gl-h { font-size: clamp(2.4rem, 4vw, 4.3rem); line-height: 1.02; color: #fff; }
.gl-h em { color: var(--oak-hi); }
.gl-lede { font-size: clamp(1.02rem, 1.12vw, 1.14rem); line-height: 1.6; color: var(--silver-hi); margin: 0 0 20px; }
.gl-cmp--hero { height: clamp(290px, 45vh, 520px); box-shadow: 0 40px 80px rgba(6, 18, 30, .45); border: 1px solid rgba(183, 205, 225, .3); }
.gl-hero__bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 24px; margin-top: 14px; }
.gl-hero__tabs { display: flex; flex-wrap: wrap; gap: 8px; }
.gl-hero__tabs button { position: relative; overflow: hidden; min-height: 46px; padding: 0 16px; display: inline-flex; align-items: center; gap: 10px; border: 1px solid rgba(183, 205, 225, .35); border-radius: var(--rb); background: rgba(10, 26, 41, .4); color: var(--silver-hi); font-weight: 600; transition: background .35s, border-color .35s, color .35s; }
.gl-hero__tabs button:hover { border-color: var(--silver-hi); }
.gl-hero__tabs button[aria-selected="true"] { background: var(--silver-hi); border-color: var(--silver-hi); color: var(--graphite); }
.gl-hero__n { font-size: .875rem; color: var(--oak-hi); font-variant-numeric: tabular-nums; }
.gl-hero__tabs button[aria-selected="true"] .gl-hero__n { color: var(--oak-deep); }
.gl-hero__t { position: absolute; left: 0; bottom: 0; height: 3px; width: 100%; background: var(--oak); transform: scaleX(0); transform-origin: left; }
.gl-hero__note { margin: 0; font-size: .92rem; color: var(--muted-d); }
@media (max-width: 1000px) { .gl-open__head { grid-template-columns: minmax(0, 1fr); gap: 16px; } }
@media (max-width: 600px) {
  .gl-h { font-size: clamp(2.2rem, 9.4vw, 3rem); }
  .gl-open .btns { flex-direction: column; align-items: stretch; }
  .gl-cmp--hero { height: 62vw; min-height: 240px; }
  .gl-hero__tabs { display: grid; grid-template-columns: 1fr 1fr 1fr; width: 100%; }
  .gl-hero__tabs button { padding: 0 8px; justify-content: center; font-size: .9rem; text-align: center; line-height: 1.15; }
  .gl-hero__n { display: none; }
}

/* ---------- filters (shared) ---------- */
.gl-filter { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: clamp(22px, 2.6vw, 36px); }
.gl-chip { min-height: 46px; padding: 0 16px; display: inline-flex; align-items: center; gap: 10px; border: 1px solid rgba(26, 31, 35, .28); border-radius: var(--rb); background: rgba(255, 255, 255, .72); font-weight: 600; font-size: .97rem; transition: background .35s, color .35s, border-color .35s; }
.gl-chip span { font-size: .875rem; color: var(--oak-deep); font-variant-numeric: tabular-nums; transition: color .35s; }
.gl-chip:hover { border-color: var(--graphite); }
.gl-chip[aria-pressed="true"] { background: var(--graphite); border-color: var(--graphite); color: #fff; }
.gl-chip[aria-pressed="true"] span { color: var(--oak-hi); }

/* ---------- REAL WORK WALL ---------- */
.gl-wall { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: clamp(150px, 15vw, 220px); grid-auto-flow: dense; gap: clamp(10px, 1.1vw, 16px); position: relative; }
.gl-tile { position: relative; display: block; border-radius: var(--r); overflow: hidden; background: var(--graphite-3); text-decoration: none; color: #fff; box-shadow: 0 10px 26px rgba(21, 48, 74, .1); }
.gl-tile[hidden] { display: none; }
.gl-tile--tall { grid-row: span 2; }
.gl-tile--wide { grid-column: span 2; }
.gl-tile.is-feat { grid-column: span 2; grid-row: span 2; }
.gl-tile.is-feat .gl-tile__cap { font-size: 1.05rem; left: 18px; bottom: 16px; }
.gl-tile img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s var(--ease), filter .6s; }
.gl-tile::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(20, 24, 27, 0) 55%, rgba(20, 24, 27, .7)); opacity: .85; transition: opacity .5s; }
.gl-tile:hover img, .gl-tile:focus-visible img { transform: scale(1.07); }
.gl-tile:hover::after, .gl-tile:focus-visible::after { opacity: 1; }
.gl-tile__cap { position: absolute; left: 12px; right: 12px; bottom: 11px; z-index: 2; font-size: .92rem; line-height: 1.25; }
.gl-tile__cap b { font-weight: 600; }
.gl-tile__cap::before { content: ''; display: block; width: 26px; height: 1px; margin-bottom: 7px; background: var(--oak-hi); transform-origin: left; transition: transform .6s var(--ease); }
.gl-tile:hover .gl-tile__cap::before { transform: scaleX(2.4); }
.gl-tile__zoom { position: absolute; right: 10px; top: 10px; z-index: 2; width: 40px; height: 40px; display: grid; place-items: center; background: rgba(28, 33, 37, .82); border-radius: var(--rb); opacity: 0; transform: scale(.8); transition: opacity .35s, transform .45s var(--ease); }
.gl-tile__zoom svg { width: 16px; height: 16px; } .gl-tile__zoom path { fill: none; stroke: #fff; stroke-width: 1.6; }
.gl-tile:hover .gl-tile__zoom, .gl-tile:focus-visible .gl-tile__zoom { opacity: 1; transform: none; }
.gl-more { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 28px; margin-top: clamp(22px, 2.6vw, 34px); padding-top: 20px; border-top: 1px solid rgba(21, 48, 74, .16); }
.gl-more__n { margin: 0; color: var(--muted); }
.gl-more__btn[hidden] { display: none; }
@media (max-width: 1000px) { .gl-wall { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 640px) {
  .gl-filter { flex-wrap: nowrap; overflow-x: auto; margin-left: calc(var(--gut) * -1); margin-right: calc(var(--gut) * -1); padding: 2px var(--gut) 6px; scroll-snap-type: x proximity; scrollbar-width: none; }
  .gl-filter::-webkit-scrollbar { display: none; }
  .gl-chip { flex: none; scroll-snap-align: start; white-space: nowrap; }
}
@media (max-width: 640px) { .gl-wall { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 42vw; } .gl-tile--wide { grid-column: span 2; }
.gl-tile.is-feat { grid-column: span 2; grid-row: span 2; }
.gl-tile.is-feat .gl-tile__cap { font-size: 1.05rem; left: 18px; bottom: 16px; } .gl-tile__cap { font-size: .875rem; left: 9px; right: 9px; } }

/* ---------- AI PREVIEW CARDS ---------- */
.gl-pairs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 1.8vw, 26px); position: relative; }
.gl-pair { margin: 0; background: #fff; border: 1px solid rgba(21, 48, 74, .12); border-radius: var(--r); padding: 10px; box-shadow: 0 14px 34px rgba(21, 48, 74, .08); transition: box-shadow .5s var(--ease); }
.gl-pair:hover { box-shadow: 0 26px 50px rgba(21, 48, 74, .16); }
.gl-pair[hidden] { display: none; }
.gl-cmp--card { aspect-ratio: 982 / 794; border-radius: calc(var(--r) - 4px); }
.gl-cmp--card .gl-cmp__handle { width: 44px; height: 44px; margin: -22px 0 0 -22px; }
.gl-cmp--card .gl-tag { top: 9px; padding: 4px 8px; }
.gl-cmp--card .gl-tag--b { left: 9px; } .gl-cmp--card .gl-tag--a { right: 9px; }
.gl-pair figcaption { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 4px 4px 6px; }
.gl-pair__t b { display: block; font: 400 1.2rem/1.2 var(--f-d); }
.gl-pair__t span { display: block; font-size: .875rem; color: var(--muted); margin-top: 2px; }
.gl-pair__open { flex: none; width: 44px; height: 44px; display: grid; place-items: center; border: 1px solid rgba(26, 31, 35, .28); border-radius: var(--rb); background: transparent; transition: background .3s, border-color .3s; }
.gl-pair__open svg { width: 16px; height: 16px; } .gl-pair__open path { fill: none; stroke: var(--text); stroke-width: 1.6; }
.gl-pair__open:hover, .gl-pair__open:focus-visible { background: var(--graphite); border-color: var(--graphite); }
.gl-pair__open:hover path, .gl-pair__open:focus-visible path { stroke: #fff; }
@media (max-width: 1000px) { .gl-pairs { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .gl-pairs { grid-template-columns: minmax(0, 1fr); } }

/* ---------- TRY IT ---------- */
.gl-try__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 96px); align-items: center; }
.gl-try__txt .lede { margin: 18px 0 24px; }
.gl-try__steps { list-style: none; margin: 0 0 28px; padding: 0; counter-reset: s; border-top: 1px solid rgba(183, 192, 198, .2); }
.gl-try__steps li { counter-increment: s; display: grid; grid-template-columns: 44px minmax(0, 1fr); column-gap: 14px; padding: 13px 0; border-bottom: 1px solid rgba(183, 192, 198, .2); }
.gl-try__steps li::before { content: counter(s); grid-row: span 2; width: 34px; height: 34px; display: grid; place-items: center; border: 1.3px solid var(--oak-hi); border-radius: var(--r); font-weight: 600; color: var(--oak-hi); font-variant-numeric: tabular-nums; }
.gl-try__steps b { color: #fff; font-weight: 600; }
.gl-try__steps span { color: var(--muted-d); font-size: .95rem; }
.gl-scan { position: relative; background: var(--graphite-2); border: 1px solid rgba(183, 192, 198, .26); border-radius: var(--r); padding: 12px; box-shadow: 0 40px 80px rgba(0, 0, 0, .35); }
.gl-scan__ph { position: relative; aspect-ratio: 982 / 794; max-height: var(--media-cap); border-radius: calc(var(--r) - 4px); overflow: hidden; }
.gl-scan__ph img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.gl-scan__a { position: absolute; inset: 0; clip-path: inset(0 0 calc(100% - var(--s, 0%)) 0); }
.gl-scan__line { position: absolute; left: 0; right: 0; top: var(--s, 0%); height: 2px; margin-top: -1px; background: var(--oak-hi); box-shadow: 0 0 14px 3px rgba(201, 150, 104, .7); opacity: var(--so, 0); }
.gl-scan__bar { display: flex; justify-content: space-between; align-items: center; padding: 12px 4px 2px; }
.gl-scan__pct { font: 400 1.4rem/1 var(--f-d); color: #fff; font-variant-numeric: tabular-nums lining-nums; }
.no-js .gl-scan__a, .rm .gl-scan__a { --s: 100%; }
@media (max-width: 900px) { .gl-try__grid { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 600px) { .gl-try .btns { flex-direction: column; align-items: stretch; } }

/* ---------- LIGHTBOX ---------- */
.gl-lb { position: fixed; inset: 0; z-index: 300; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; color: #fff; }
.gl-lb[hidden] { display: none; }
.gl-lb__bg { position: absolute; inset: 0; background: rgba(14, 17, 20, .94); backdrop-filter: blur(6px); }
.gl-lb__top, .gl-lb__foot, .gl-lb__stage { position: relative; z-index: 1; }
.gl-lb__top { display: flex; justify-content: space-between; align-items: center; padding: 14px clamp(14px, 3vw, 32px); }
.gl-lb__n { font: 400 1.3rem/1 var(--f-d); font-variant-numeric: tabular-nums lining-nums; color: var(--silver-hi); }
.gl-lb__btn { width: 48px; height: 48px; display: grid; place-items: center; border: 1px solid rgba(183, 192, 198, .4); border-radius: var(--rb); background: rgba(28, 33, 37, .6); transition: background .3s, border-color .3s; }
.gl-lb__btn:hover, .gl-lb__btn:focus-visible { background: var(--oak); border-color: var(--oak); }
.gl-lb__btn svg { width: 16px; height: 14px; } .gl-lb__btn path { fill: none; stroke: #fff; stroke-width: 1.7; }
.gl-lb__stage { display: grid; place-items: center; padding: 0 clamp(14px, 3vw, 32px); min-height: 0; }
.gl-lb__img { max-width: 100%; max-height: calc(100svh - 170px); width: auto; height: auto; border-radius: var(--r); box-shadow: 0 30px 80px rgba(0, 0, 0, .5); }
.gl-lb__stage .gl-cmp { width: min(100%, calc((100svh - 170px) * 1.237)); aspect-ratio: 982 / 794; }
.gl-lb__foot { display: flex; align-items: center; justify-content: center; gap: clamp(12px, 2vw, 28px); padding: 14px clamp(14px, 3vw, 32px) 18px; }
.gl-lb__cap { margin: 0; flex: 0 1 760px; text-align: center; font-size: .98rem; line-height: 1.4; color: var(--silver-hi); }
.gl-lb__cap a { color: var(--oak-hi); font-weight: 600; white-space: nowrap; }
.lb-open { overflow: hidden; }

/* filters and show-more change the height under the pointer: never let the browser jump the page to follow a button */
.gl-real, .gl-ai { overflow-anchor: none; }