/* Platinum liquid glass: shared controls, with a restrained sapphire primary. */
:root{
  --glass-edge:rgba(236,241,248,.34);
  --glass-text:#f3f5f8;
  --glass-shadow:0 7px 22px rgba(0,0,0,.22),inset 0 1px 0 rgba(255,255,255,.23),inset 0 -1px 0 rgba(8,12,20,.28);
}
:is(.button,.nav-toggle,.close-dialog,.channel-option,.related a,.contact-card .link-button){
  --glass-x:28%;--glass-y:0%;
  position:relative;
  isolation:isolate;
  overflow:hidden;
  color:var(--glass-text);
  border:1px solid var(--glass-edge);
  border-radius:999px;
  background:
    radial-gradient(ellipse at var(--glass-x) var(--glass-y),rgba(255,255,255,.24),transparent 65%),
    linear-gradient(135deg,rgba(236,240,247,.16),rgba(165,175,191,.06) 48%,rgba(221,228,239,.13));
  -webkit-backdrop-filter:blur(18px) saturate(135%);
  backdrop-filter:blur(18px) saturate(135%);
  box-shadow:var(--glass-shadow);
  text-shadow:0 1px 3px rgba(0,0,0,.32);
  transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease,background-color .22s ease;
}
/* A masked rim catches light without painting over the text. */
@supports(mask-composite:exclude){
  :is(.button,.nav-toggle,.close-dialog,.channel-option,.related a,.contact-card .link-button)::before{
    content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;pointer-events:none;
    background:linear-gradient(130deg,rgba(255,255,255,.82),rgba(231,236,245,.05) 24%,rgba(202,211,225,.38) 57%,rgba(255,255,255,.09) 76%,rgba(242,245,250,.62));
    -webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
    mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
    mask-composite:exclude;
  }
}
.button{min-height:50px;padding:12px 23px;font-weight:550;letter-spacing:.05px}
.button.primary{
  border-color:rgba(197,215,255,.58);
  background:
    radial-gradient(ellipse at var(--glass-x) var(--glass-y),rgba(255,255,255,.34),transparent 65%),
    linear-gradient(135deg,rgba(212,224,248,.25),rgba(82,119,188,.23) 52%,rgba(216,226,243,.18));
  box-shadow:0 8px 26px rgba(10,25,64,.36),0 0 18px rgba(80,124,233,.1),inset 0 1px 0 rgba(255,255,255,.33),inset 0 -1px 0 rgba(6,14,30,.3);
}
.button.primary:hover{background-color:rgba(133,163,219,.1)}
.button.quiet{padding:10px 19px;min-height:44px;font-size:13px;justify-content:center;margin-top:10px}
.nav-toggle{padding:8px 18px;min-height:44px}
.close-dialog{width:38px;height:38px;min-width:38px;padding:0;display:inline-grid;place-items:center;flex-shrink:0}
.channel-options .channel-option{border-radius:24px;padding:23px;text-shadow:0 1px 3px #0005}
.channel-option span{color:#d0d7e3}
.related a{min-height:44px;display:inline-flex;align-items:center;padding:9px 17px}
.contact-card .link-button{display:inline-flex;align-items:center;justify-content:center;justify-self:start;max-width:100%;padding:10px 17px;min-height:48px;text-decoration:none;font-size:17px}
:is(.button,.nav-toggle,.close-dialog,.channel-option,.related a,.contact-card .link-button):focus-visible{outline:3px solid #b6ceff;outline-offset:5px}
@media(hover:hover) and (pointer:fine){
  :is(.button,.nav-toggle,.close-dialog,.channel-option,.related a,.contact-card .link-button):hover{
    transform:translateY(-2px);
    border-color:rgba(242,246,252,.61);
    background-color:rgba(218,229,247,.08);
    box-shadow:0 12px 30px rgba(0,0,0,.29),inset 0 1px 0 rgba(255,255,255,.37),inset 0 -1px 0 rgba(9,15,28,.28);
  }
  .button.primary:hover{box-shadow:0 12px 30px rgba(10,25,64,.4),0 0 23px rgba(85,131,245,.18),inset 0 1px 0 rgba(255,255,255,.43),inset 0 -1px 0 rgba(6,14,30,.3)}
}
:is(.button,.nav-toggle,.close-dialog,.channel-option,.related a,.contact-card .link-button):active{transform:translateY(0) scale(.975);box-shadow:0 3px 12px #0004,inset 0 1px 5px #0003}
:is(.button,.nav-toggle,.close-dialog,.channel-option,.related a,.contact-card .link-button):disabled{opacity:.55;transform:none;cursor:default}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  :is(.button,.nav-toggle,.close-dialog,.channel-option,.related a,.contact-card .link-button){background-color:#303745}
  .button.primary{background-color:#304368}
}
@media(max-width:650px){.button{padding-inline:21px}.channel-options .channel-option{border-radius:21px}.contact-card .link-button{font-size:16px}}
@media(prefers-reduced-motion:reduce){
  :is(.button,.nav-toggle,.close-dialog,.channel-option,.related a,.contact-card .link-button){transition:none;transform:none!important}
}
@media(forced-colors:active){
  :is(.button,.nav-toggle,.close-dialog,.channel-option,.related a,.contact-card .link-button){background:ButtonFace;color:ButtonText;border:1px solid ButtonText;text-shadow:none;box-shadow:none;backdrop-filter:none}
  :is(.button,.nav-toggle,.close-dialog,.channel-option,.related a,.contact-card .link-button)::before{display:none}
}

/* Hover glints trace both halves of the border once, in exactly 0.25 s. */
.service-card,.contact-card,.price-panel{position:relative}
.edge-shine{position:absolute;inset:-1px;width:calc(100% + 2px);height:calc(100% + 2px);max-width:none;overflow:visible;pointer-events:none;z-index:2;border-radius:inherit}
.edge-shine path{fill:none;stroke:#f4f7fc;stroke-width:2.1;stroke-linecap:round;stroke-dasharray:var(--edge-tail,0px) var(--edge-gap,1px);stroke-dashoffset:var(--edge-start,0px);opacity:0;filter:drop-shadow(0 0 3px rgba(229,236,248,.95));vector-effect:non-scaling-stroke}
.is-edge-shining>.edge-shine path{animation:platinum-perimeter .25s linear both}
@keyframes platinum-perimeter{
  0%{stroke-dashoffset:var(--edge-start,0px);opacity:0}
  9%{opacity:1}
  85%{opacity:1}
  100%{stroke-dashoffset:var(--edge-end,0px);opacity:0}
}
@media(prefers-reduced-motion:reduce){.edge-shine{display:none}}
@media(forced-colors:active){.edge-shine{display:none}}

/* Cards share the platinum glass surface as well as the perimeter glint. */
:is(.service-card,.contact-card,.price-panel,.portfolio-empty){
  --glass-card-paint:radial-gradient(ellipse at var(--glass-x,28%) var(--glass-y,0%),rgba(244,247,252,.13),transparent 64%),linear-gradient(140deg,rgba(218,226,239,.12),rgba(151,164,185,.035) 52%,rgba(214,225,242,.075));
  background:var(--glass-card-paint);
  border:1px solid rgba(222,232,246,.29);
  border-radius:24px;
  box-shadow:0 12px 35px rgba(0,0,0,.18),inset 0 1px 0 rgba(255,255,255,.17),inset 0 -1px 0 rgba(0,0,0,.2);
  -webkit-backdrop-filter:blur(16px) saturate(130%);
  backdrop-filter:blur(16px) saturate(130%);
}
@media(hover:hover) and (pointer:fine){
  :is(.service-card,.contact-card,.price-panel,.portfolio-empty):hover{background:var(--glass-card-paint);background-color:rgba(203,219,247,.035);border-color:rgba(231,240,253,.48)}
}
@media(max-width:650px){:is(.service-card,.contact-card,.price-panel,.portfolio-empty){-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){:is(.service-card,.contact-card,.price-panel,.portfolio-empty){background-color:#242b37}}
@media(forced-colors:active){:is(.service-card,.contact-card,.price-panel,.portfolio-empty){background:Canvas;color:CanvasText;border-color:CanvasText;box-shadow:none;backdrop-filter:none}}