/* ADFLIX V20 — UX & Visual Upgrade. Scoped additions preserve the existing brand system. */
:root{--a20-gallery-columns:3;--a20-gallery-gap:28px;--a20-gallery-height:236px;--a20-work-columns:3;--a20-work-gap:30px;--a20-work-height:260px;--a20-tree-sway:10s}
/* The navigation should remain a comfortable continuous hover area. */
.a19-menu-wrap{z-index:240}.a19-mega{z-index:260;max-height:min(77dvh,680px);overscroll-behavior:contain}
.a19-menu-trigger{min-height:48px;border-radius:4px;outline-offset:5px}
.a19-menu-wrap.is-open .a19-menu-trigger{color:#ffbe83}
.a19-menu-wrap:has(.a19-mega:not([hidden])):after{content:"";position:absolute;pointer-events:auto;top:100%;height:16px;left:-18px;right:-30px;background:transparent}
.a19-sub-grid .a19-sub-link{width:100%;text-align:left;cursor:pointer;font-family:inherit;letter-spacing:.01em;display:flex;line-height:1.45;font-weight:550}
.a19-sub-link:focus-visible,.a19-menu-trigger:focus-visible{outline:2px solid #ffa85e;outline-offset:3px}
.a19-mega[hidden]{display:none!important}
/* Naturalistic tree: layered bark depth, fewer hard-edged glows and more readable fruits. */
#projects .ct-embedded{margin-top:12px;margin-bottom:38px}
#projects .ct-tree-art{filter:drop-shadow(0 26px 30px #010608c9) contrast(1.04) saturate(.90)}
#projects .ct-tree-side:before{background:radial-gradient(ellipse at 45% 48%,#c99d3920,transparent 54%),radial-gradient(ellipse at 54% 92%,#c66a2c17,transparent 60%)}
#projects .ct-natural-canopy{opacity:.72;filter:brightness(.82) saturate(.93);-webkit-mask-image:linear-gradient(to bottom,#000 0%,#000 55%,transparent 100%);mask-image:linear-gradient(to bottom,#000 0%,#000 55%,transparent 100%)}
#projects .ct-orb{border:1px solid #c7a9809e;background:radial-gradient(circle at 32% 18%,#ffffff47 0,#ffffff08 9%,transparent 25%),radial-gradient(ellipse at 22% 8%,#ffffff24,transparent 40%),radial-gradient(ellipse at 60% 94%,#e8933925,transparent 46%),radial-gradient(circle at 48% 44%,var(--ct-glass,#29323f),#0b141a 83%);box-shadow:inset 7px 8px 18px #ffffff18,inset -11px -18px 30px #020b13d9,0 13px 26px #0009;transition:box-shadow .4s,filter .4s,transform .4s}
#projects .ct-node.is-selected .ct-orb,#projects .ct-node:hover .ct-orb{box-shadow:inset 7px 9px 23px #ffffff35,inset -13px -20px 26px #061018da,0 0 0 1px #ffa557,0 0 28px #f98c354f,0 20px 33px #0008;transform:scale(1.055)}
#projects .ct-panel{border:1px solid #e5a96861;box-shadow:0 25px 70px #0009,inset 0 1px 0 #ffffff0d;background:linear-gradient(155deg,#1a2630f5 0%,#0e1921f8 80%)}
#projects .ct-subheading span{font-size:9px;letter-spacing:.045em;color:#ffc28e}
#projects .ct-panel-list{gap:9px;max-height:220px}
#projects .ct-panel-list li .ct-child-link{width:100%;text-align:left;cursor:pointer;display:block;border-radius:10px;min-height:44px;padding:11px 12px;color:#e8eff0;border:1px solid #ffffff24;background:linear-gradient(135deg,#fff9,#ffffff08);font-size:11px;line-height:1.4}
#projects .ct-panel-list li .ct-child-link:before{content:'↗';margin-right:8px;color:#ffae6d}
#projects .ct-panel-list li .ct-child-link:hover,#projects .ct-panel-list li .ct-child-link:focus-visible{background:#fca45d16;border-color:#ffb47c9b;transform:translateY(-2px);outline:0}
#projects .ct-panel-photo{border-radius:12px;overflow:hidden}
#projects .ct-panel-photo img{object-fit:cover}
/* Editorial project grid — equal smaller imagery and substantial breathing space. */
#projects .work-grid{display:grid;grid-template-columns:repeat(var(--a20-work-columns),minmax(0,1fr));gap:var(--a20-work-gap);align-items:stretch}
#projects .work-card,#projects .work-card:nth-child(5n+1),#projects .work-card:nth-child(5n+2),#projects .work-card:first-child{grid-column:auto!important;min-height:0;height:var(--a20-work-height);border-radius:17px;border:1px solid #ffffff27;box-shadow:0 12px 34px #00000027;transform:translateY(0);transition:transform .4s cubic-bezier(.2,.7,.2,1),box-shadow .4s,border-color .4s}
#projects .work-card:hover,#projects .work-card:focus-visible{transform:translateY(-5px);box-shadow:0 24px 55px #0008;border-color:#ffb5757d;outline:none}
#projects .work-card .work-cover img{transform:scale(1);transition:transform .7s ease,filter .5s}
#projects .work-card:hover .work-cover img{transform:scale(1.045);filter:saturate(1.1)}
#projects .work-card .work-bottom{left:18px;right:18px;bottom:17px}
#projects .work-card .work-bottom strong{font-size:clamp(12px,1.1vw,16px);line-height:1.4}
#projects .work-card .work-bottom small{font-size:9px}
#projects .work-card .work-bottom b{width:32px;height:32px;transition:background .25s}
#projects .work-card:hover .work-bottom b{background:#f99c4a;color:#091722}
#projects .work-card .work-number{left:15px;top:15px;padding:7px 9px;font-size:9px}
/* Photo library: smaller consistent cards, configurable through CMS, with more negative space. */
#gallery .gallery-grid{display:grid;grid-template-columns:repeat(var(--a20-gallery-columns),minmax(0,1fr));gap:var(--a20-gallery-gap);align-items:stretch;margin-top:24px}
#gallery .gallery-card,#gallery .gallery-card:nth-child(7n+1),#gallery .gallery-card:nth-child(7n+2),#gallery .gallery-card:first-child{grid-column:auto!important;width:100%;height:var(--a20-gallery-height);border-radius:16px;border:1px solid #ccd5d6;box-shadow:0 8px 29px #16272c16;background:#dfe5e7;transition:transform .4s,box-shadow .4s,border-color .4s;transform:none}
#gallery .gallery-card:hover,#gallery .gallery-card:focus-visible{transform:translateY(-6px);box-shadow:0 26px 55px #2331372d;border-color:#e8b78d;outline:none}
#gallery .gallery-card img{transform:scale(1);transition:transform .7s,filter .7s}
#gallery .gallery-card:hover img{transform:scale(1.055);filter:saturate(1.05)}
#gallery .gallery-card::after{background:linear-gradient(180deg,transparent 35%,rgba(7,17,24,.12) 53%,rgba(7,16,23,.88) 100%)}
#gallery .gallery-card-meta{inset:auto 15px 14px}
#gallery .gallery-card-meta strong{font-size:12px;letter-spacing:-.01em}
#gallery .gallery-card-meta small{font-size:9px}
#gallery .gallery-card-meta>span:last-child{width:33px;height:33px;border-radius:50%;border-color:#ffffff88;background:#ffffff16;backdrop-filter:blur(10px)}
/* Gallery and service dialogs have genuinely interactive semantics, zoom & transitions. */
.a20-service-dialog,.a20-gallery-dialog{position:fixed;inset:0;max-width:none;max-height:none;width:100%;height:100%;background:transparent;border:0;padding:clamp(12px,4vw,42px);color:#f6f7f8;overflow:auto;isolation:isolate}
.a20-service-dialog::backdrop,.a20-gallery-dialog::backdrop{background:rgba(1,8,13,.86);backdrop-filter:blur(17px)}
.a20-service-dialog[open],.a20-gallery-dialog[open]{display:grid;place-items:center;animation:a20-modal-rise .35s cubic-bezier(.18,.85,.25,1) both}
@keyframes a20-modal-rise{from{opacity:0;transform:translateY(22px) scale(.986)}to{opacity:1;transform:none}}
.a20-service-modal{position:relative;width:min(960px,100%);min-height:390px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.06fr);background:#0b1921;border:1px solid #dea26a67;border-radius:23px;overflow:hidden;box-shadow:0 45px 150px #000c,0 0 80px #ec8f3622}
.a20-service-visual{position:relative;min-height:360px;background:radial-gradient(circle at 45% 25%,#d88a4644,transparent 55%),#12232c}
.a20-service-visual img{width:100%;height:100%;position:absolute;inset:0;object-fit:cover;filter:saturate(.93)}
.a20-service-visual:after{content:'';position:absolute;inset:0;background:linear-gradient(0deg,#09151bc7,transparent 56%)}
.a20-service-visual>span{position:absolute;bottom:22px;left:28px;z-index:1;font-size:10px;letter-spacing:.2em;color:#f8cfab}
.a20-service-content{padding:clamp(26px,4vw,55px);display:flex;flex-direction:column;justify-content:center;gap:20px}
.a20-small-label{text-transform:uppercase;font:700 10px Manrope,sans-serif;letter-spacing:.18em;color:#ffb17a}
.a20-service-content h2{font:650 clamp(23px,2.6vw,35px)/1.25 Manrope,sans-serif;letter-spacing:-.05em;margin:0;color:#fff}
.a20-service-content p{font-size:14px;line-height:1.9;color:#b2c4cb;margin:0}
.a20-service-highlights{display:flex;flex-wrap:wrap;gap:8px}
.a20-service-highlights span{font-size:10px;padding:9px 12px;border:1px solid #ffffff2b;border-radius:30px;color:#d2e0e2;background:#ffffff08}
.a20-service-actions{display:flex;gap:11px;flex-wrap:wrap;margin-top:8px}
.a20-service-actions button{padding:13px 16px;font:700 11px Manrope,sans-serif;cursor:pointer;border-radius:30px}
.a20-request{background:#ffac66;color:#111b20;border:0}.a20-back{background:transparent;color:#f5f5f5;border:1px solid #ffffff55}
.a20-close,.a20-viewer-close{position:absolute;z-index:6;right:16px;top:16px;display:grid;place-items:center;width:39px;height:39px;border:1px solid #ffffff70;background:#07131cde;color:#fff;border-radius:50%;font-size:23px;cursor:pointer}
.a20-viewer{position:relative;width:min(1120px,100%);overflow:hidden;border-radius:22px;background:#091720;border:1px solid #ffffff2d;box-shadow:0 38px 130px #000c}
.a20-viewer-stage{background:#070f15;min-height:220px;height:min(70vh,660px);display:grid;place-items:center;position:relative}
.a20-viewer-stage img,.a20-viewer-stage video,.a20-viewer-stage iframe{display:block;width:100%;height:100%;max-height:100%;object-fit:contain;border:0;background:#061016}
.a20-viewer-stage.a20-stage-enter{animation:a20-media-pop .38s ease-out both}@keyframes a20-media-pop{from{opacity:.25;filter:blur(6px);transform:scale(.985)}to{opacity:1;filter:none;transform:none}}
.a20-viewer-prev,.a20-viewer-next{position:absolute;z-index:5;top:42%;width:46px;height:46px;border-radius:50%;border:1px solid #fff9;background:#111e29c7;color:#fff;font:400 30px Arial,sans-serif;cursor:pointer;backdrop-filter:blur(14px)}
.a20-viewer-prev{left:15px}.a20-viewer-next{right:15px}.a20-viewer-prev:hover,.a20-viewer-next:hover{background:#d38a44;color:#071118}
.a20-viewer-caption{display:flex;gap:14px;justify-content:space-between;align-items:center;padding:20px clamp(20px,3vw,38px) 26px}
#a20ViewerCategory{color:#ffaf71;font-size:9px;letter-spacing:.16em;font-weight:750}
#a20ViewerTitle{font:650 clamp(16px,1.8vw,23px) Manrope,sans-serif;margin:7px 0;color:#f7f7f7}
#a20ViewerDesc{font-size:12px;color:#95acb5;line-height:1.5;margin:0;max-width:650px}
#a20ViewerCount{white-space:nowrap;font-size:11px;letter-spacing:.12em;color:#cedbdd}
.a20-viewer [hidden]{display:none!important}
@media(max-width:1100px){#projects .work-grid{grid-template-columns:repeat(2,minmax(0,1fr))}#gallery .gallery-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}}
@media(max-width:900px){#projects .ct-embedded .ct-tree-side{height:540px;min-height:0;overflow:hidden;border-radius:20px;background:radial-gradient(ellipse at 50% 45%,#b7862321,transparent 62%)}#projects .ct-embedded .ct-showcase{gap:19px}#projects .ct-embedded .ct-panel{width:100%;max-width:640px;min-height:0;margin:0 auto}#projects .ct-embedded .ct-under{padding-top:18px}#projects .ct-panel-list{max-height:270px}}
@media(max-width:650px){
 #projects .ct-embedded .ct-tree-side{height:454px;min-height:454px;width:100%;overflow:hidden;border-radius:18px;margin-top:5px}
 #projects .ct-embedded .ct-tree-art{width:100%;height:100%;opacity:.87;filter:drop-shadow(0 20px 20px #000a)}
 #projects .ct-orbs{transform:none!important}
 #projects .ct-embedded .ct-node{--ct-dia:var(--ct-dia-mobile-sm)!important}
 #projects .ct-natural-canopy{opacity:.72;left:0;right:0}
 #projects .ct-orb-label{font-size:9px;line-height:1.22}
 #projects .ct-orb-ico{width:25px;height:25px}
 #projects .ct-embedded .ct-panel{border-radius:16px}
 #projects .ct-embedded .ct-panel-inner{padding:21px 18px}
 #projects .ct-embedded .ct-panel-list{grid-template-columns:1fr 1fr;gap:9px;max-height:268px}
 #projects .ct-embedded .ct-panel-list li .ct-child-link{min-height:45px;padding:10px;font-size:10px}
 #projects .work-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
 #projects .work-card,#projects .work-card:nth-child(5n+1),#projects .work-card:nth-child(5n+2),#projects .work-card:first-child{grid-column:auto!important;height:190px;min-height:0}
 #projects .work-card .work-bottom{left:11px;bottom:11px;right:11px}
 #projects .work-card .work-bottom strong{font-size:11px}
 #projects .work-card .work-bottom small{font-size:8px}
 #projects .work-card .work-bottom b{width:26px;height:26px;font-size:13px}
 #gallery .gallery-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
 #gallery .gallery-card,#gallery .gallery-card:nth-child(7n+1),#gallery .gallery-card:nth-child(7n+2),#gallery .gallery-card:first-child{height:184px}
 .a20-service-modal{grid-template-columns:1fr;max-height:calc(100dvh - 35px);overflow:auto}
 .a20-service-visual{min-height:175px;max-height:215px}
 .a20-service-content{padding:25px;gap:14px}
 .a20-service-content h2{font-size:23px}
 .a20-service-content p{font-size:12px}
 .a20-viewer-stage{height:min(59dvh,470px);min-height:260px}
 .a20-viewer-prev,.a20-viewer-next{width:38px;height:38px;top:37%;font-size:24px}
 .a20-viewer-caption{padding:17px 20px 22px}
}
@media(max-width:380px){#projects .ct-embedded .ct-tree-side{height:420px;min-height:420px}#projects .ct-embedded .ct-node{--ct-dia:93px!important}#projects .work-grid{gap:13px}#gallery .gallery-grid{gap:14px}#gallery .gallery-card,#gallery .gallery-card:nth-child(7n+1),#gallery .gallery-card:nth-child(7n+2){height:161px}}
@media(prefers-reduced-motion:reduce){.a20-gallery-dialog,.a20-service-dialog,.a20-stage-enter{animation:none!important}#gallery .gallery-card,#projects .work-card{transition:none!important}}

#projects .ct-foliage-g,#projects .ct-natural-canopy{animation-duration:var(--a20-tree-sway,10s)}
#projects #adflixTree{scroll-margin-top:90px}
#gallery .gallery-card::after{content:"";pointer-events:none;position:absolute;inset:0;background:linear-gradient(to bottom,transparent 33%,rgba(7,16,24,.22) 60%,rgba(7,16,24,.88) 100%)}
#gallery .gallery-card-meta{position:absolute;z-index:3;display:flex;align-items:end;justify-content:space-between;gap:8px;color:#fff}
