/* Ocean adaptation of Serafim Gradient Button and Cybergaz Neon Button.
   Sources and MIT terms: licenses/controls-21st-MIT.txt.
   No idle animation: colour travel only while a person interacts. */
@property --mp-pos-x{syntax:'<percentage>';initial-value:11.14%;inherits:false}
@property --mp-pos-y{syntax:'<percentage>';initial-value:140%;inherits:false}
@property --mp-spread-x{syntax:'<percentage>';initial-value:150%;inherits:false}
@property --mp-spread-y{syntax:'<percentage>';initial-value:180.06%;inherits:false}
@property --mp-stop-1{syntax:'<percentage>';initial-value:18%;inherits:false}
@property --mp-stop-2{syntax:'<percentage>';initial-value:46%;inherits:false}
@property --mp-stop-3{syntax:'<percentage>';initial-value:68%;inherits:false}
@property --mp-stop-4{syntax:'<percentage>';initial-value:90%;inherits:false}

:root{--control-ease:cubic-bezier(.22,1,.36,1);--control-focus:#a6e8ff}
/* The compact header action has the same solid platinum finish as the hero. */
.site-header :is(.nav-contact,.header-contact){
 isolation:isolate;overflow:hidden;gap:17px;padding:8px 9px 8px 20px;
 min-height:46px;border:1px solid #e6f8ffb8;
 background:linear-gradient(125deg,#b0cad9 0%,#f3fbff 32%,#cce9ef 58%,#8bb5c8 100%);
 color:#092432;box-shadow:inset 0 1px 1px #fff,inset 0 -2px 2px #375a725c,0 3px 10px #0003;
 transition:transform 160ms var(--control-ease),box-shadow 200ms;
}
.site-header :is(.nav-contact,.header-contact)::before{
 content:'';position:absolute;inset:-20% -40%;z-index:-1;pointer-events:none;
 background:linear-gradient(110deg,transparent 35%,#fff9 48%,transparent 60%);
 transform:translateX(-50%);opacity:0;transition:transform 500ms var(--control-ease),opacity 180ms;
}
.site-header :is(.nav-contact,.header-contact)>span[aria-hidden]{
 width:28px;height:28px;display:grid;place-items:center;border-radius:50%;
 color:#112d3d;background:#243e5012;box-shadow:inset 0 1px 2px #1833472e,0 1px 0 #ffffffb8;
 transition:transform 240ms var(--control-ease),background-color 180ms;
}
/* A visible ocean gradient, adapted from the selected 21st source. */
:is(.sp-service-contact,.helm-case-link,.journal-intro .inline-link,.work-heading>.inline-link,
 .editorial-refined .article-cta .button.primary,#request-dialog .button.primary,
 #contact-dialog button[type=submit],#contact-dialog .dialog-success a){
 position:relative;isolation:isolate;display:inline-flex;align-items:center;justify-content:center;
 gap:22px;width:fit-content;max-width:100%;min-height:54px;padding:15px 24px;
 border:0;border-radius:17px;color:#f4faff;text-decoration:none;font-size:17px;font-weight:600;line-height:1.35;
 background:radial-gradient(var(--mp-spread-x) var(--mp-spread-y) at var(--mp-pos-x) var(--mp-pos-y),
 #061c42 var(--mp-stop-1),#123e84 var(--mp-stop-2),#165775 var(--mp-stop-3),#2456a3 var(--mp-stop-4),#327087 100%);
 box-shadow:inset 0 1px 0 #bceeff4d,0 5px 15px #0003;
 transition:--mp-pos-x 400ms,--mp-pos-y 400ms,--mp-spread-x 400ms,--mp-spread-y 400ms,
 --mp-stop-1 400ms,--mp-stop-2 400ms,--mp-stop-3 400ms,--mp-stop-4 400ms,transform 150ms var(--control-ease);
 touch-action:manipulation;-webkit-tap-highlight-color:transparent;
}
:is(.sp-service-contact,.helm-case-link,.journal-intro .inline-link,.work-heading>.inline-link,
 .editorial-refined .article-cta .button.primary,#request-dialog .button.primary,
 #contact-dialog button[type=submit],#contact-dialog .dialog-success a)::before{
 content:'';position:absolute;inset:0;border-radius:inherit;padding:1px;pointer-events:none;
 background:linear-gradient(140deg,#bdeaffb0,#85b8e424 38%,#96eef173 70%,#c2ddff80);
 mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);mask-composite:exclude;
 -webkit-mask-composite:xor;
}
:is(.helm-case-link,.sp-service-contact,.journal-intro .inline-link,.work-heading>.inline-link)>:is(span[aria-hidden],svg){
 flex:none;transition:transform 200ms var(--control-ease);
}
.work-heading>.inline-link{white-space:nowrap;align-self:center}
/* Cybergaz's two edge highlights distinguish secondary actions from main CTAs. */
:is(.editorial-refined #article-grid .card-read,.editorial-refined .button.secondary,
 .sp-service-copy .inline-link,.helm-controls button,.gallery-controls button){
 position:relative;isolation:isolate;display:inline-flex;align-items:center;justify-content:center;
 min-height:46px;padding:11px 18px;gap:14px;border:1px solid #8bc5eb40;border-radius:14px;
 color:#dcefff;background:linear-gradient(145deg,#16344d,#0b1d31);text-decoration:none;
 box-shadow:inset 0 1px 0 #d2edff0d;
 transition:transform 160ms var(--control-ease),background-color 180ms,color 180ms;
}
:is(.editorial-refined #article-grid .card-read,.editorial-refined .button.secondary,
 .sp-service-copy .inline-link,.helm-controls button,.gallery-controls button)::before,
:is(.editorial-refined #article-grid .card-read,.editorial-refined .button.secondary,
 .sp-service-copy .inline-link,.helm-controls button,.gallery-controls button)::after{
 content:'';position:absolute;inset-inline:15%;height:1px;pointer-events:none;
 background:linear-gradient(90deg,transparent,#a1eaff,transparent);transition:opacity 200ms;
}
:is(.editorial-refined #article-grid .card-read,.editorial-refined .button.secondary,
 .sp-service-copy .inline-link,.helm-controls button,.gallery-controls button)::before{top:-1px;opacity:.5}
:is(.editorial-refined #article-grid .card-read,.editorial-refined .button.secondary,
 .sp-service-copy .inline-link,.helm-controls button,.gallery-controls button)::after{bottom:-1px;opacity:.2}
.helm-controls button,.gallery-controls button{width:48px;height:48px;padding:0;border-radius:50%}
.sp-service-copy .inline-link{font-size:16px;margin-top:8px}
/* Opening the navigation feels like opening a physical control panel. */
.site-header .menu-toggle{
 border-radius:15px;background:linear-gradient(150deg,#254253,#0b1c2b 72%);
 border-color:#9ebcc454;box-shadow:inset 0 1px 0 #b2e0f426,0 2px 5px #0003;
}
.site-header .menu-toggle[aria-expanded=true]{background:#c9e5ee;color:#0c2639;border-color:#e6f8ff}
.site-header .menu-toggle>span{width:18px;height:1.5px}
.site-menu{border-color:#a0cee74a;background:linear-gradient(135deg,#112b3bed,#071520f7 62%,#112c40f7);box-shadow:0 24px 64px #0008,inset 0 1px 0 #e2f3ff12;contain:layout paint}
.menu-links{gap:5px}
.menu-links a{border:0;border-radius:16px;padding:13px 15px;min-height:79px;font-size:27px;letter-spacing:-.025em}
.site-menu .menu-links a{transform:none}
.menu-links a small{font-size:13px;line-height:1.45;color:#a8c4d3;margin-top:6px}
.menu-links a svg{width:39px;height:39px;padding:10px;border:1px solid #a9d5e62e;border-radius:50%;background:#90c7ed08;box-sizing:border-box;stroke-width:1.7}
.menu-links a:focus-visible{background:linear-gradient(115deg,#21496588,#17324c40);color:#effaff}
.menu-links a:focus-visible svg{background:#c8eaf0;color:#0c293b}
.menu-about .menu-preview-title{font-size:26px;line-height:1.2}
.menu-about .menu-preview-copy{font-size:15px;line-height:1.55}
.site-navigation a{position:relative;min-height:44px;display:inline-flex;align-items:center;font-size:15px}
.site-navigation a::after{content:'';position:absolute;bottom:6px;inset-inline:0;height:1px;background:linear-gradient(90deg,transparent,#8fdbe7,transparent);opacity:0;transform:scaleX(.5);transition:transform 180ms var(--control-ease),opacity 180ms}
.site-navigation a[aria-current=page]::after{opacity:1;transform:scaleX(1)}
:is(.nav-contact,.header-contact,.menu-toggle,.sp-service-contact,.helm-case-link,.card-read,.button,.helm-controls button,.gallery-controls button):focus-visible{outline:3px solid var(--control-focus);outline-offset:4px}
:is(.sp-service-contact,.helm-case-link,.card-read,.button,.helm-controls button,.gallery-controls button):active{transform:scale(.97);transition-duration:80ms}
:is(button,.button)[disabled],.button[aria-disabled=true]{opacity:.5;cursor:not-allowed;transform:none}
@media(hover:hover) and (pointer:fine){
 .site-header :is(.nav-contact,.header-contact):hover{color:#071e2e;background:linear-gradient(125deg,#b0cad9,#f3fbff 32%,#cce9ef 58%,#8bb5c8);box-shadow:inset 0 1px 1px #fff,inset 0 -2px 2px #375a725c,0 5px 18px #0005}
 .site-header :is(.nav-contact,.header-contact):hover::before{transform:translateX(40%);opacity:1}
 .site-header :is(.nav-contact,.header-contact):hover>span[aria-hidden]{transform:rotate(45deg);background:#243e501f}
 :is(.sp-service-contact,.helm-case-link,.journal-intro .inline-link,.work-heading>.inline-link,
 .editorial-refined .article-cta .button.primary,#request-dialog .button.primary,#contact-dialog button[type=submit],#contact-dialog .dialog-success a):hover{
  --mp-pos-x:0%;--mp-pos-y:91.51%;--mp-spread-x:120.24%;--mp-spread-y:103.18%;
  --mp-stop-1:0%;--mp-stop-2:8.8%;--mp-stop-3:35.44%;--mp-stop-4:75.34%;color:#fff;
 }
 :is(.helm-case-link,.sp-service-contact,.journal-intro .inline-link,.work-heading>.inline-link):hover>:is(span[aria-hidden],svg){transform:translate(3px,-3px)}
 :is(.editorial-refined #article-grid .card-read,.editorial-refined .button.secondary,.sp-service-copy .inline-link,.helm-controls button,.gallery-controls button):hover{color:#fff;background:linear-gradient(145deg,#234b68,#12304c)}
 :is(.editorial-refined #article-grid .card-read,.editorial-refined .button.secondary,.sp-service-copy .inline-link,.helm-controls button,.gallery-controls button):hover::before{opacity:1}
 :is(.editorial-refined #article-grid .card-read,.editorial-refined .button.secondary,.sp-service-copy .inline-link,.helm-controls button,.gallery-controls button):hover::after{opacity:.65}
 .menu-links a:hover{background:linear-gradient(115deg,#21496588,#17324c40);color:#effaff}
 .menu-links a:hover svg{background:#c8eaf0;color:#0c293b;transform:rotate(45deg)}
 .site-navigation a:hover::after{opacity:1;transform:scaleX(1)}
}
@media(max-width:800px){
 .site-header :is(.nav-contact,.header-contact){padding:7px 7px 7px 15px;min-height:44px;gap:10px}
 .site-header :is(.nav-contact,.header-contact)>span[aria-hidden]{width:26px;height:26px}
 .site-menu{padding:14px;border-radius:23px}.menu-links{gap:4px}.menu-links a{padding:13px 12px;font-size:25px;min-height:82px}.menu-links a small{font-size:12px;max-width:23ch}.menu-links a svg{width:36px;height:36px;padding:9px}
 :is(.sp-service-contact,.helm-case-link,.journal-intro .inline-link,.work-heading>.inline-link,.editorial-refined .article-cta .button.primary){font-size:16px;min-height:52px;padding:14px 20px}
 .work-heading>.inline-link{align-self:start;margin-top:4px}.sp-service-copy .inline-link{font-size:15px;line-height:1.45;text-align:left;max-width:100%}
}
@media(prefers-reduced-motion:reduce){
 :is(.nav-contact,.header-contact,.menu-toggle,.sp-service-contact,.helm-case-link,.inline-link,.card-read,.button,.menu-links a,.menu-links a svg,.site-navigation a)::before,
 :is(.nav-contact,.header-contact,.menu-toggle,.sp-service-contact,.helm-case-link,.inline-link,.card-read,.button,.menu-links a,.menu-links a svg,.site-navigation a),.site-header :is(.nav-contact,.header-contact)>span[aria-hidden]{transition:none!important;animation:none!important}
}
.reduced :is(.nav-contact,.header-contact,.menu-toggle,.sp-service-contact,.helm-case-link,.inline-link,.card-read,.button,.menu-links a,.menu-links a svg,.site-navigation a){transition:none!important}
@media(forced-colors:active){
 :is(.nav-contact,.header-contact,.menu-toggle,.sp-service-contact,.helm-case-link,.inline-link,.card-read,.button,.helm-controls button,.gallery-controls button){border:1px solid ButtonText;background:ButtonFace!important;color:ButtonText!important;box-shadow:none}
 :is(.nav-contact,.header-contact,.sp-service-contact,.helm-case-link,.inline-link,.card-read,.button)::before,:is(.card-read,.button)::after{display:none}
}