/* Stova – site styles (layout styles live inline in each page) */
@font-face{font-family:"Stova Display";src:url(/fonts/nt-seawave-alternative.woff) format("woff");font-display:swap}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;background:#F3F6F6}
body{margin:0;background:#F3F6F6}
img{max-width:100%}
[hidden]{display:none !important}
:focus-visible{outline:2px solid #2C687A;outline-offset:3px}
.sv-dark :focus-visible,[data-sv-tone="dark"] :focus-visible{outline-color:#F3F6F6}
.sv-skip{position:absolute;left:16px;top:-60px;z-index:100;padding:10px 16px;background:#12353D;color:#F3F6F6;font-weight:500;text-decoration:none;border-radius:2px;transition:top .2s ease}
.sv-skip:focus{top:12px}
.sv-sr{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* motion & links */
@keyframes svPanelIn{from{opacity:0;transform:translate(-50%,-14px)}to{opacity:1;transform:translate(-50%,0)}}
@keyframes svFade{from{opacity:0}to{opacity:1}}
@keyframes svRise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes svMarquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.sv-cta .sv-arrow,.sv-link .sv-arrow,.sv-submit .sv-arrow{transition:transform .5s cubic-bezier(.75,0,.25,1)}
.sv-cta:hover .sv-arrow,.sv-link:hover .sv-arrow,.sv-submit:hover .sv-arrow{transform:translateX(5px)}
.sv-menu .sv-menu-link{transition:opacity .35s ease}
.sv-menu nav:hover .sv-menu-link{opacity:.4}
.sv-menu nav .sv-menu-link:hover{opacity:1}

/* header: white over dark sections, teal over light ones */
.sv-header{color:#F3F6F6;transition:color .45s cubic-bezier(.4,0,.2,1),transform .5s cubic-bezier(.75,0,.25,1),opacity .35s ease}
.sv-header.is-light{color:#2C687A}
.sv-logo{position:relative;display:block;width:73px;height:18px}
.sv-logo img{position:absolute;top:0;left:0;width:100%;height:100%;transition:opacity .45s cubic-bezier(.4,0,.2,1)}
.sv-header .sv-logo-teal{opacity:0}
.sv-header.is-light .sv-logo-teal{opacity:1}
.sv-header.is-light .sv-logo-white{opacity:0}
.sv-side{transition:opacity .35s ease,transform .5s cubic-bezier(.75,0,.25,1)}
/* scrolling down hides the whole header (it has no background, so it must not sit on top of text); scrolling up brings it back */
.sv-header.is-compact{opacity:0;transform:translateY(-110%);pointer-events:none}
.sv-header:focus-within{opacity:1;transform:none;pointer-events:auto}
.sv-header .sv-pill-solid{background:currentColor}
.sv-header .sv-pill-solid svg{color:#12353D;transition:color .45s cubic-bezier(.4,0,.2,1)}
.sv-header.is-light .sv-pill-solid svg{color:#F3F6F6}
.sv-header .sv-rule{background:currentColor;opacity:.45}

/* slogan marquee */
.sv-marquee{animation:svMarquee 42s linear infinite}

/* services tabs */
.sv-tab{color:#A9C3C9;transition:color .3s ease}
.sv-tab:hover,.sv-tab[aria-selected="true"]{color:#F3F6F6}
.sv-panel{animation:svRise .55s cubic-bezier(.4,0,.2,1)}

/* creations carousel */
.sv-track{scrollbar-width:none}
.sv-track::-webkit-scrollbar{display:none}
.sv-nav[aria-disabled="true"]{opacity:.35;cursor:default}
.sv-card .sv-card-hover{opacity:0;transition:opacity .3s cubic-bezier(.4,0,.2,1)}
.sv-card:hover .sv-card-hover,.sv-card:focus-visible .sv-card-hover{opacity:1}
.sv-card .sv-card-desc{max-height:0;opacity:0;overflow:hidden;transition:max-height .55s cubic-bezier(.75,0,.25,1),opacity .4s ease}
.sv-card:hover .sv-card-desc,.sv-card:focus-visible .sv-card-desc{max-height:220px;opacity:1}
.sv-card img,.sv-project img{transition:transform .9s cubic-bezier(.4,0,.2,1)}
.sv-card:hover img,.sv-project:hover img{transform:scale(1.03)}

/* projects grid: 2 / 3 / 2 */
.sv-projects{display:grid;grid-template-columns:repeat(6,1fr);gap:40px 16px}
.sv-project{grid-column:span 3;margin:0}
.sv-project.is-third{grid-column:span 2}
.sv-project .sv-frame{overflow:hidden;border-radius:2px;background:#DCE8EA}
.sv-project img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover}

/* quotation form */
.sv-field:focus{outline:2px solid #2C687A;outline-offset:1px}
.sv-choice:focus-within,.sv-drop:focus-within{outline:2px solid #2C687A;outline-offset:2px}
.sv-choice{transition:border-color .2s ease,background-color .2s ease}
.sv-choice.is-checked{border-color:#12353D !important;background:#E4ECEE !important}
.sv-drop.has-file{border-style:solid;border-color:#12353D}
.sv-submit[disabled]{opacity:.6;cursor:progress}

/* responsive (container = page width) */
@container (max-width: 700px){
  .sv-hide-sm{display:none !important}
  .sv-card .sv-card-desc{max-height:none;opacity:1}
}
@container (max-width: 900px){
  .sv-projects{grid-template-columns:repeat(2,1fr)}
  .sv-project,.sv-project.is-third{grid-column:span 1}
}
@container (max-width: 560px){
  .sv-projects{grid-template-columns:1fr;gap:32px}
}
@container (min-width: 900px){.sv-stack{position:sticky}}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  .sv-marquee{animation:none}
  *,*::before,*::after{transition-duration:.01ms !important;animation-duration:.01ms !important}
}
