/* Approved lens material. Actual backdrop sampling; no opaque gradient fill. */
:root{--glass-fill:transparent;--violet-fill:#8b5cf616;--glass-edge:#ffffff1a;--glass-depth:0 7px 22px #03020826,inset 0 .5px 0 #ffffff1a}
.lens-defs{position:absolute;width:0;height:0;overflow:hidden;pointer-events:none}
.lens-surface{position:relative;isolation:isolate;background:transparent;border:1px solid #ffffff1a;box-shadow:var(--glass-depth);backdrop-filter:none;-webkit-backdrop-filter:none;-webkit-tap-highlight-color:transparent}
.lens-surface>.lens-backdrop{position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:-2;background:#ffffff04;backdrop-filter:blur(8px) saturate(1.08);-webkit-backdrop-filter:blur(8px) saturate(1.08)}
.lens-surface::before,.button.primary.lens-surface::before{content:'';position:absolute;inset:-1px;border-radius:inherit;padding:1px;pointer-events:none;z-index:3;background:conic-gradient(from 28deg,#ffffff12 0deg,#ffffff04 75deg,#ffffff21 125deg,#ffffff63 183deg,#ffffff0a 231deg,#ffffff06 256deg,#ffffff75 305deg,#ffffff12 360deg);mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);mask-composite:exclude;-webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;opacity:.55}
.lens-surface::after,.button.primary.lens-surface::after{content:'';position:absolute;inset:1px;border-radius:inherit;box-shadow:inset 1px 1px 1px #ffffff18,inset -1px -1px 2px #00000015;pointer-events:none;z-index:1;background:none;opacity:1;transition:none}
.lens-surface>.lens-light{position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;background:radial-gradient(ellipse 100px 60px at var(--shine-x,40%) var(--shine-y,10%),#ffffff20,transparent 75%);transition:opacity .18s;z-index:1}
.button.primary.lens-surface{background:transparent;border-color:#ffffff1a;box-shadow:var(--glass-depth)}
.button.primary>.lens-backdrop{background:#8b5cf60c}
.button.primary.lens-surface::before{background:conic-gradient(from 28deg,#d3b2fb26,#d3b2fb0a 80deg,#ffffff35 140deg,#d7bbfb77 195deg,#b792fb0c 253deg,#f4e8ff80 310deg,#d3b2fb26)}
.hero .lens-surface::before,.header:not(.is-scrolled) .lens-surface::before{opacity:1}
.hero .button.primary>.lens-backdrop,.header:not(.is-scrolled) .button.primary>.lens-backdrop{background:#8b5cf616}
.button.lens-surface,.icon-button.lens-surface,.scroll-cue.lens-surface,.cover-open.lens-surface,.text-button.lens-surface{transition:transform .18s ease-out,box-shadow .18s;user-select:none;-webkit-user-select:none}
.button>span:not(.lens-backdrop):not(.lens-light),.button>svg,.icon-button>svg,.cover-open>svg,.text-button>span:not(.lens-backdrop):not(.lens-light),.text-button>svg{position:relative;z-index:4}
.button svg,.text-button svg{transition:transform .18s ease-out}
@media(hover:hover) and (pointer:fine){
 .lens-surface:hover>.lens-light{opacity:1}
 .button.lens-surface:hover,.icon-button.lens-surface:hover{transform:translateY(-1px);border-color:#ffffff1a;box-shadow:0 9px 24px #03020830,inset 0 .5px 0 #ffffff1a}
 .button.lens-surface:hover svg{transform:translateX(2px)}
}
.button.lens-surface:active,.icon-button.lens-surface:active,.text-button.lens-surface:active{transform:scale(.975);border-color:#ffffff26;box-shadow:0 3px 12px #03020820}
/* Labels stay fixed. Only the decorative cushion can move. */
.glass-group{isolation:isolate}
.glass-group>.lens-backdrop{background:#ffffff02;backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px)}
.glass-group>button,.glass-group>a{z-index:5;white-space:nowrap}
.glass-group>button{background:transparent;box-shadow:none;transform:none;user-select:none;-webkit-user-select:none}
.glass-group>button:active{transform:none}
.glass-group>button:focus-visible,.glass-group>a:focus-visible{outline-offset:-4px}
.glass-group .glass-slider.lens-surface{backdrop-filter:none;-webkit-backdrop-filter:none;position:absolute;left:0;top:0;z-index:2;border:0;border-radius:999px;background:transparent;box-shadow:0 5px 14px #0000001c,inset 0 1px 0 #ffffff10;pointer-events:none;transform-origin:center;opacity:0;transition:none}
.glass-slider>.lens-backdrop{background:#ffffff08;backdrop-filter:blur(8px) saturate(1.1);-webkit-backdrop-filter:blur(8px) saturate(1.1)}
.glass-slider.lens-surface::before{opacity:.7;background:conic-gradient(from 30deg,#ffffff19,#ffffff07 74deg,#ffffff30 130deg,#ffffff88 185deg,#ffffff10 240deg,#ffffff08 265deg,#ffffff9a 310deg,#ffffff19)}
.nav .glass-slider.lens-surface,.mobile-nav .glass-slider.lens-surface{transition:transform .24s cubic-bezier(.2,.8,.2,1),width .24s,height .24s,opacity .15s}
.menu-dialog .mobile-nav .glass-slider.lens-surface{border-radius:15px}
.languages button[aria-pressed=true],.device-switch button.selected,.portfolio-tabs button[aria-selected=true],.glass-group button.is-preview{background:transparent;box-shadow:none;color:#fff}
[data-lens-switch],[data-lens-switch]>button{touch-action:pan-y pinch-zoom}
[data-lens-switch]{overflow:hidden;user-select:none;-webkit-user-select:none}
[data-lens-switch][data-phase=holding],[data-lens-switch][data-phase=dragging],[data-lens-switch][data-phase=dragging]>button{cursor:grabbing}
.nav a:hover,.mobile-nav a:hover{background:transparent}
.footer .languages.lens-surface{background:transparent;border:1px solid #ffffff1a;box-shadow:var(--glass-depth);backdrop-filter:none;-webkit-backdrop-filter:none}
.portfolio-feature .cover-open.lens-surface{background:transparent;border-color:#ffffff1a;box-shadow:var(--glass-depth);backdrop-filter:none;-webkit-backdrop-filter:none}
.scroll-cue.lens-surface,.cover-open.lens-surface{position:absolute}
.viewer-header>.icon-button.lens-surface{position:relative}
.cover-open>.lens-backdrop{background:#12121c35}
.is-expanded .service-plus.lens-surface{background:transparent;border-color:#ffffff1a;box-shadow:var(--glass-depth)}
.is-expanded .service-plus>.lens-backdrop{background:#8b5cf616}
.service-trigger:active .service-plus{transform:scale(.975)}
.viewer-footer .text-button.lens-surface{padding:10px 16px;border-radius:999px;min-height:44px}
.viewer-footer [data-previous] svg{transform:rotate(180deg)}
/* Quiet neutral depth for the contact surface and modal backgrounds. */
.contact-section.lens-surface{position:relative;background:#17171be0;border-color:#ffffff12;box-shadow:inset 0 .5px 0 #ffffff10}
.contact-section>.lens-backdrop{background:#ffffff02;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.contact-section.lens-surface::before{opacity:.3}
.contact-section>.lens-light{display:none}
.field input,.field select,.field textarea{background:#ffffff05;border:1px solid #ffffff29;box-shadow:inset 0 .5px 0 #ffffff0d;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);color:var(--text);font-size:16px}
.field input,.field select{height:52px;min-height:52px;padding:13px 16px}
.field select{appearance:auto;-webkit-appearance:menulist}
.field [aria-invalid=true]{border-color:#f1a9a9}
.field input::placeholder,.field textarea::placeholder{color:#b7b2c0}
/* Keep the native fixed dialog positioning, focus trap and visual viewport sizing. */
dialog.lens-surface{position:fixed;background:#17151fbd;border-color:#ffffff24;box-shadow:0 24px 80px #0007;backdrop-filter:blur(18px) saturate(1.05);-webkit-backdrop-filter:blur(18px) saturate(1.05)}
/* Native scrolling keeps the material on the dialog, not on a scrolling child. */
dialog.lens-surface>.lens-backdrop{display:none}
.form-dialog .dialog-toolbar .close-button.lens-surface{position:relative;inset:auto}
dialog.lens-surface::before{opacity:.6}
dialog.lens-surface>.lens-light{display:none}
dialog::backdrop{background:#09091180;backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px)}
.menu-dialog .mobile-nav.lens-surface{background:transparent;border:1px solid #ffffff12}
/* Limited, static progressive optics on the landscape. Graphite uses CSS blur. */
html[data-optics=svg] .hero .button.lens-surface>.lens-backdrop,
html[data-optics=svg] .header:not(.is-scrolled) .button.lens-surface>.lens-backdrop,
html[data-optics=svg] .header:not(.is-scrolled) .glass-slider>.lens-backdrop{backdrop-filter:url('#lens-warp') blur(8px) saturate(1.1)}
@media(max-width:700px){
 .header .languages button{min-width:44px;min-height:44px}
 .viewer-footer .text-button.lens-surface{padding:10px;min-width:44px;min-height:44px}
 .portfolio-tabs{gap:2px}
}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
 .lens-surface>.lens-backdrop{background:#292732!important}
 .button.primary>.lens-backdrop{background:#48335e!important}
 .glass-slider>.lens-backdrop{background:#514958!important}
 dialog.lens-surface{background:#211f29}
 .field input,.field select,.field textarea{background:#292630}
 dialog::backdrop{background:#090911e8}
}
@supports not ((mask-composite:exclude) or (-webkit-mask-composite:xor)){
 .lens-surface::before{background:none;padding:0;border:1px solid #ffffff30}
}
@media(prefers-reduced-motion:reduce){
 .lens-surface,.lens-surface::before,.lens-surface::after,.glass-slider,.lens-light{transition:none!important}
 .lens-light{display:none}
 .button.lens-surface:hover,.button.lens-surface:active,.icon-button.lens-surface:hover,.icon-button.lens-surface:active,.text-button.lens-surface:active,.service-trigger:active .service-plus,.button.lens-surface:hover svg{transform:none}
}