/* Flexsor Services tokens */
:root{
  --font-heading: Optima, "Segoe UI", "Noto Sans", Helvetica, Arial, sans-serif;
  --font-sans: Helvetica, Arial, system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", sans-serif;
  --radius: 14px;

  /* Brand palette */
  --bg: #C6C6D5;
  --surface: #E3E4EC;
  --surface-2: #F0F1F6;
  --text: #1A1D1A;
  --muted: #374151;
  --primary: #191B54;
  --primary-contrast: #ffffff;
  --accent: #3E505B;
  --border: #D2D5E0;

  --container: 1140px;
}

/* Base */
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; font-family:var(--font-sans); color:var(--text); background:var(--bg);
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}
img{max-width:100%; display:block}
h2,h3{font-family:var(--font-heading)}
h1 {font-size: 40px;}
h1#main-title {font-size: 3rem; margin: auto auto 0px; text-align: center;}
h2#sub-main-title {font-size: 2rem; text-align: center;}
h4 {margin: 10px auto;}
.ta-center {text-align: center;}
.sub-heading {text-align: center;}
.container{max-width:var(--container); margin-inline:auto; padding: clamp(16px, 2vw, 24px)}
.section{padding: clamp(0px, 1vw, 96px) 0}
main .section {min-height: 50vh;}
.section--alt{background: var(--surface)}
.section--hero{background: radial-gradient(60% 100% at 50% 0%, var(--surface-2), transparent)}
.headline{font-size:clamp(1.4rem, 6vw, 1rem); line-height:1.1; margin: 0 0 12px}
.lede{font-size:clamp(1rem, 2.2vw, 1.2rem); color:var(--muted); margin:0 0 24px}

/* Header */
.site-header{position:sticky; top:0; backdrop-filter:saturate(1.2) blur(8px);
  background: color-mix(in oklab, var(--bg), white 15%); border-bottom:1px solid var(--border); z-index:100}
.header__bar{display:flex; align-items:center; gap:16px}
.logo{font-weight:800; text-decoration:none; color:var(--text); letter-spacing:0.3px}
.logo span{color:var(--primary)}

.nav-toggle{display:none}
.site-nav ul{display:flex; gap:16px; list-style:none; margin:0; padding:0}
.site-nav a{display:inline-block; padding:10px 12px; border-radius:10px; text-decoration:none; color:var(--text)}
.site-nav a.is-active, .site-nav a:focus-visible{outline:none; background: var(--surface);}

/* Cards & Grid */
.grid{display:grid; gap:16px}
.grid--3{grid-template-columns: repeat(3, minmax(0,1fr))}
.card{background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:16px}

/* Buttons */
.btn{display:inline-block; border-radius:999px; padding:12px 18px; text-decoration:none; font-weight:600; border:1px solid var(--border)}
.btn--primary{background:var(--primary); color:var(--primary-contrast)}

/* Services */
#workprofile .container ul {margin-bottom: 2em;}

/* Contact */
/*main .section {height: 85vh;}*/
#contact {min-height: 90vh;}
/*.contact-slide-a {margin: 1vh 1vw; width: 40vw; float: left; display: block; min-width: 200px; max-width: 300px;}*/
.contact-slide-a {margin: 1vh 1vw; width: 40vw; float: left; display: block; min-width: 180px; max-width: 300px;}
.contact-slide-a h5 {margin-top: 10px;}
/*.contact-email {margin-top: 10px;}*/

/* Forms */
.form{display:grid; gap:12px; max-width:560px}
.form__row{display:grid; gap:6px}
input, textarea{background:var(--surface); color:var(--text); border:1px solid var(--border); border-radius:10px; padding:10px}
input:focus-visible, textarea:focus-visible{outline:2px solid color-mix(in oklab, var(--primary), white 10%)}

/* Footer */
.site-footer{border-top:1px solid var(--border); background: var(--surface-2)}
.site-footer p{margin:0}

/* Hero slider */
.hero-slider{height: 45vh; min-height: 100px; position:relative; border-radius:16px; overflow:hidden; border:1px solid var(--border)}
.hero-slide{position:absolute; inset:0; opacity:0; transition:opacity 600ms ease}
.hero-slide.is-active{opacity:1}
.hero-slider img{width:100%; height:min(62vh, 560px); object-fit:cover}
.slider-controls{position:absolute; inset:auto 0 8px 0; display:flex; align-items:center; justify-content:center; gap:8px}
.slider-dot{width:10px; height:10px; border-radius:50%; background:color-mix(in oklab, var(--text), transparent 60%); border:1px solid var(--border)}
.slider-dot[aria-current="true"]{background:var(--primary)}
.slider-prev,.slider-next{position:absolute; top:50%; transform:translateY(-50%); background:color-mix(in oklab, var(--surface), white 10%);
  border:1px solid var(--border); border-radius:999px; padding:8px 12px}
.slider-prev{left:8px} .slider-next{right:8px}

/* Responsive nav */
@media (max-width: 840px){
  .grid--3{grid-template-columns: 1fr}
  .nav-toggle{display:inline-flex; align-items:center; gap:8px; background:var(--surface); color:var(--text);
    border:1px solid var(--border); padding:10px 12px; border-radius:10px}
  .site-nav{display:none}
  .site-nav[data-open="true"]{display:block}
  .site-nav ul{flex-direction:column; padding:12px 0}
  .site-nav a{padding:12px}
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  .hero-slide{transition:none}
}