/* SLC Comms production CSS
   Generated specifically for the current index.html.
   Replaces https://cdn.tailwindcss.com for this page. */

/* Minimal Tailwind-compatible reset */
*,*::before,*::after{box-sizing:border-box;border-width:0;border-style:solid;border-color:#e5e7eb;}
html{line-height:1.5;-webkit-text-size-adjust:100%;tab-size:4;font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;}
body{margin:0;line-height:inherit;font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;}
hr{height:0;color:inherit;border-top-width:1px;}
abbr:where([title]){text-decoration:underline dotted;}
h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit;}
a{color:inherit;text-decoration:inherit;}
b,strong{font-weight:bolder;}
code,kbd,samp,pre{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;font-size:1em;}
small{font-size:80%;}
sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline;}
sub{bottom:-.25em;} sup{top:-.5em;}
table{text-indent:0;border-color:inherit;border-collapse:collapse;}
button,input,optgroup,select,textarea{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;margin:0;padding:0;}
button,select{text-transform:none;}
button,[type=button],[type=reset],[type=submit]{-webkit-appearance:button;background-color:transparent;background-image:none;}
:-moz-focusring{outline:auto;}
progress{vertical-align:baseline;}
::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto;}
[type=search]{-webkit-appearance:textfield;outline-offset:-2px;}
::-webkit-search-decoration{-webkit-appearance:none;}
::-webkit-file-upload-button{-webkit-appearance:button;font:inherit;}
summary{display:list-item;}
blockquote,dl,dd,h1,h2,h3,h4,h5,h6,hr,figure,p,pre{margin:0;}
fieldset{margin:0;padding:0;}
legend{padding:0;}
ol,ul,menu{list-style:none;margin:0;padding:0;}
dialog{padding:0;}
textarea{resize:vertical;}
input::placeholder,textarea::placeholder{opacity:1;color:#9ca3af;}
button,[role=button]{cursor:pointer;}
:disabled{cursor:default;}
img,svg,video,canvas,audio,iframe,embed,object{display:block;vertical-align:middle;}
img,video{max-width:100%;height:auto;}
[hidden]{display:none;}

/* Site-specific rules */
#clients img{filter:none!important;-webkit-filter:none!important;opacity:1!important;}
.skip-link{position:fixed;left:1rem;top:1rem;z-index:100;transform:translateY(-200%);background:#000;color:#fff;padding:.75rem 1rem;border-radius:9999px;}
.skip-link:focus{transform:translateY(0);}

/* Utilities used by index.html */
.-inset-4{inset:-1rem;}
.-mt-2{margin-top:-0.5rem;}
.-z-10{z-index:-10;}
.absolute{position:absolute;}
.backdrop-blur-sm{-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);}
.backdrop-blur-xl{-webkit-backdrop-filter:blur(24px);backdrop-filter:blur(24px);}
.bg-\[\#000000\]{background-color:#000000;}
.bg-\[\#2F0A28\]{background-color:#2F0A28;}
.bg-\[\#3C6E71\]{background-color:#3C6E71;}
.bg-\[\#3C6E71\]\/10{background-color:rgba(60, 110, 113, 0.1);}
.bg-\[\#3C6E71\]\/20{background-color:rgba(60, 110, 113, 0.2);}
.bg-\[\#3C6E71\]\/5{background-color:rgba(60, 110, 113, 0.05);}
.bg-\[\#DFDFDF\]{background-color:#DFDFDF;}
.bg-\[\#DFDFDF\]\/70{background-color:rgba(223, 223, 223, 0.7);}
.bg-\[\#F5F5F5\]{background-color:#F5F5F5;}
.bg-black\/10{background-color:rgba(0, 0, 0, 0.1);}
.bg-black\/5{background-color:rgba(0, 0, 0, 0.05);}
.bg-black\/70{background-color:rgba(0, 0, 0, 0.7);}
.bg-white{background-color:#fff;}
.bg-white\/10{background-color:rgba(255, 255, 255, 0.1);}
.bg-white\/5{background-color:rgba(255, 255, 255, 0.05);}
.block{display:block;}
.border{border-width:1px;}
.border-\[\#DFDFDF\]{border-color:#DFDFDF;}
.border-\[\#DFDFDF\]\/40{border-color:rgba(223, 223, 223, 0.4);}
.border-b{border-bottom-width:1px;}
.border-black\/5{border-color:rgba(0, 0, 0, 0.05);}
.border-t{border-top-width:1px;}
.border-white\/40{border-color:rgba(255, 255, 255, 0.4);}
.cursor-pointer{cursor:pointer;}
.duration-300{transition-duration:300ms;}
.fixed{position:fixed;}
.flex{display:flex;}
.flex-col{flex-direction:column;}
.flex-shrink-0{flex-shrink:0;}
.flex-wrap{flex-wrap:wrap;}
.focus\:ring-2:focus{--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 0 2px var(--tw-ring-color, rgb(59 130 246 / .5));box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow);}
.focus\:ring-\[\#DFDFDF\]:focus{--tw-ring-color:#DFDFDF;}
.font-medium{font-weight:500;}
.font-semibold{font-weight:600;}
.gap-0{gap:0;}
.gap-1{gap:0.25rem;}
.gap-12{gap:3rem;}
.gap-2{gap:0.5rem;}
.gap-3{gap:0.75rem;}
.gap-4{gap:1rem;}
.gap-6{gap:1.5rem;}
.gap-8{gap:2rem;}
.grid{display:grid;}
.grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr));}
.grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr));}
.group:hover .group-hover\:bg-black\/25{background-color:rgba(0, 0, 0, 0.25);}
.group:hover .group-hover\:opacity-100{opacity:1;}
.group:hover .group-hover\:opacity-25{opacity:.25;}
.group:hover .group-hover\:scale-105{transform:scale(1.05);}
.h-12{height:3rem;}
.h-20{height:5rem;}
.h-32{height:8rem;}
.h-36{height:9rem;}
.h-40{height:10rem;}
.h-44{height:11rem;}
.h-full{height:100%;}
.hidden{display:none;}
.hover\:bg-\[\#325a5c\]:hover{background-color:#325a5c;}
.hover\:bg-\[\#DFDFDF\]\/60:hover{background-color:rgba(223, 223, 223, 0.6);}
.hover\:bg-black\/90:hover{background-color:rgba(0, 0, 0, 0.9);}
.hover\:bg-white\/10:hover{background-color:rgba(255, 255, 255, 0.1);}
.hover\:text-\[\#000000\]:hover{color:#000000;}
.hover\:text-\[\#3C6E71\]:hover{color:#3C6E71;}
.inline-block{display:inline-block;}
.inline-flex{display:inline-flex;}
.inset-0{inset:0;}
.inset-x-0{left:0;right:0;}
.italic{font-style:italic;}
.items-center{align-items:center;}
.items-start{align-items:flex-start;}
.justify-between{justify-content:space-between;}
.justify-center{justify-content:center;}
.leading-relaxed{line-height:1.625;}
.leading-snug{line-height:1.375;}
.leading-tight{line-height:1.25;}
.list-none{list-style-type:none;}
.max-h-20{max-height:5rem;}
.max-w-3xl{max-width:48rem;}
.max-w-6xl{max-width:72rem;}
.max-w-sm{max-width:24rem;}
.mb-1{margin-bottom:0.25rem;}
.mb-10{margin-bottom:2.5rem;}
.mb-12{margin-bottom:3rem;}
.mb-14{margin-bottom:3.5rem;}
.mb-2{margin-bottom:0.5rem;}
.mb-3{margin-bottom:0.75rem;}
.mb-4{margin-bottom:1rem;}
.mb-6{margin-bottom:1.5rem;}
.min-h-screen{min-height:100vh;}
.min-w-0{min-width:0;}
.mt-1{margin-top:0.25rem;}
.mt-4{margin-top:1rem;}
.mt-6{margin-top:1.5rem;}
.mt-8{margin-top:2rem;}
.mx-auto{margin-left:auto;margin-right:auto;}
.normal-case{text-transform:none;}
.object-contain{object-fit:contain;}
.object-cover{object-fit:cover;}
.opacity-0{opacity:0;}
.opacity-80{opacity:.8;}
.outline-none{outline:2px solid transparent;outline-offset:2px;}
.overflow-hidden{overflow:hidden;}
.p-4{padding:1rem;}
.p-5{padding:1.25rem;}
.p-6{padding:1.5rem;}
.p-8{padding:2rem;}
.pb-24{padding-bottom:6rem;}
.pb-4{padding-bottom:1rem;}
.pb-6{padding-bottom:1.5rem;}
.pointer-events-none{pointer-events:none;}
.pt-24{padding-top:6rem;}
.px-0{padding-left:0px;padding-right:0px;}
.px-3{padding-left:0.75rem;padding-right:0.75rem;}
.px-4{padding-left:1rem;padding-right:1rem;}
.px-5{padding-left:1.25rem;padding-right:1.25rem;}
.px-6{padding-left:1.5rem;padding-right:1.5rem;}
.py-10{padding-top:2.5rem;padding-bottom:2.5rem;}
.py-16{padding-top:4rem;padding-bottom:4rem;}
.py-2{padding-top:0.5rem;padding-bottom:0.5rem;}
.py-2\.5{padding-top:0.625rem;padding-bottom:0.625rem;}
.py-20{padding-top:5rem;padding-bottom:5rem;}
.py-3{padding-top:0.75rem;padding-bottom:0.75rem;}
.py-6{padding-top:1.5rem;padding-bottom:1.5rem;}
.py-8{padding-top:2rem;padding-bottom:2rem;}
.relative{position:relative;}
.rounded-2xl{border-radius:1rem;}
.rounded-3xl{border-radius:1.5rem;}
.rounded-\[24px\]{border-radius:24px;}
.rounded-\[32px\]{border-radius:32px;}
.rounded-full{border-radius:9999px;}
.rounded-xl{border-radius:.75rem;}
.scroll-smooth{scroll-behavior:smooth;}
.shadow-lg{box-shadow:0 10px 15px -3px rgb(0 0 0 / .1),0 4px 6px -4px rgb(0 0 0 / .1);}
.shadow-md{box-shadow:0 4px 6px -1px rgb(0 0 0 / .1),0 2px 4px -2px rgb(0 0 0 / .1);}
.shadow-sm{box-shadow:0 1px 2px 0 rgb(0 0 0 / .05);}
.shadow-xl{box-shadow:0 20px 25px -5px rgb(0 0 0 / .1),0 8px 10px -6px rgb(0 0 0 / .1);}
.space-y-3 > :not([hidden]) ~ :not([hidden]){margin-top:0.75rem;margin-bottom:0;}
.space-y-4 > :not([hidden]) ~ :not([hidden]){margin-top:1rem;margin-bottom:0;}
.text-2xl{font-size:1.5rem;line-height:2rem;}
.text-3xl{font-size:1.875rem;line-height:2.25rem;}
.text-\[\#000000\]{color:#000000;}
.text-\[\#000\]{color:#000;}
.text-\[\#2F0A28\]{color:#2F0A28;}
.text-\[\#3C6E71\]{color:#3C6E71;}
.text-\[\#847577\]{color:#847577;}
.text-\[\#847577\]\/60{color:rgba(132, 117, 119, 0.6);}
.text-\[\#DFDFDF\]{color:#DFDFDF;}
.text-\[\#DFDFDF\]\/85{color:rgba(223, 223, 223, 0.85);}
.text-\[10px\]{font-size:10px;}
.text-\[11px\]{font-size:11px;}
.text-\[13px\]{font-size:13px;}
.text-\[14px\]{font-size:14px;}
.text-\[15px\]{font-size:15px;}
.text-base{font-size:1rem;line-height:1.5rem;}
.text-center{text-align:center;}
.text-lg{font-size:1.125rem;line-height:1.75rem;}
.text-sm{font-size:0.875rem;line-height:1.25rem;}
.text-white{color:#fff;}
.text-white\/90{color:rgba(255, 255, 255, 0.9);}
.text-xl{font-size:1.25rem;line-height:1.75rem;}
.text-xs{font-size:0.75rem;line-height:1rem;}
.top-0{top:0;}
.tracking-\[0\.3em\]{letter-spacing:0.3em;}
.tracking-wide{letter-spacing:0.025em;}
.transition{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:150ms;}
.transition-colors{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:150ms;}
.transition-opacity{transition-property:opacity;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:150ms;}
.underline{text-decoration-line:underline;}
.underline-offset-4{text-underline-offset:4px;}
.uppercase{text-transform:uppercase;}
.w-12{width:3rem;}
.w-20{width:5rem;}
.w-full{width:100%;}
.z-10{z-index:10;}
.z-50{z-index:50;}

@media (min-width:640px){
.sm\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr));}
.sm\:text-4xl{font-size:2.25rem;line-height:2.5rem;}
}

@media (min-width:768px){
.md\:block{display:block;}
.md\:col-span-12{grid-column:span 12 / span 12;}
.md\:col-span-3{grid-column:span 3 / span 3;}
.md\:col-span-4{grid-column:span 4 / span 4;}
.md\:col-start-1{grid-column-start:1;}
.md\:col-start-10{grid-column-start:10;}
.md\:col-start-4{grid-column-start:4;}
.md\:col-start-5{grid-column-start:5;}
.md\:col-start-7{grid-column-start:7;}
.md\:col-start-9{grid-column-start:9;}
.md\:flex{display:flex;}
.md\:flex-row{flex-direction:row;}
.md\:gap-8{gap:2rem;}
.md\:grid-cols-12{grid-template-columns:repeat(12,minmax(0,1fr));}
.md\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr));}
.md\:grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr));}
.md\:h-2{height:0.5rem;}
.md\:h-36{height:9rem;}
.md\:h-40{height:10rem;}
.md\:h-44{height:11rem;}
.md\:inline{display:inline;}
.md\:items-center{align-items:center;}
.md\:justify-between{justify-content:space-between;}
.md\:max-h-24{max-height:6rem;}
.md\:min-h-\[420px\]{min-height:420px;}
.md\:mt-6{margin-top:1.5rem;}
.md\:pb-32{padding-bottom:8rem;}
.md\:pt-28{padding-top:7rem;}
.md\:pt-32{padding-top:8rem;}
.md\:px-0{padding-left:0px;padding-right:0px;}
.md\:px-10{padding-left:2.5rem;padding-right:2.5rem;}
.md\:px-14{padding-left:3.5rem;padding-right:3.5rem;}
.md\:py-10{padding-top:2.5rem;padding-bottom:2.5rem;}
.md\:py-14{padding-top:3.5rem;padding-bottom:3.5rem;}
.md\:py-24{padding-top:6rem;padding-bottom:6rem;}
.md\:py-28{padding-top:7rem;padding-bottom:7rem;}
.md\:text-2xl{font-size:1.5rem;line-height:2rem;}
.md\:text-3xl{font-size:1.875rem;line-height:2.25rem;}
.md\:text-5xl{font-size:3rem;line-height:1;}
.md\:text-\[13px\]{font-size:13px;}
.md\:text-\[15px\]{font-size:15px;}
.md\:text-lg{font-size:1.125rem;line-height:1.75rem;}
.md\:text-sm{font-size:0.875rem;line-height:1.25rem;}
.md\:text-xl{font-size:1.25rem;line-height:1.75rem;}
}

@media (min-width:1024px){
.lg\:gap-16{gap:4rem;}
.lg\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr));}
.lg\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr));}
.lg\:grid-cols-\[minmax\(0\,1\.2fr\)_minmax\(0\,1fr\)\]{grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);}
.lg\:h-44{height:11rem;}
.lg\:h-48{height:12rem;}
.lg\:max-h-28{max-height:7rem;}
.lg\:max-w-md{max-width:28rem;}
.lg\:pt-28{padding-top:7rem;}
.lg\:pt-36{padding-top:9rem;}
.lg\:pt-4{padding-top:1rem;}
.lg\:px-14{padding-left:3.5rem;padding-right:3.5rem;}
.lg\:px-20{padding-left:5rem;padding-right:5rem;}
.lg\:px-24{padding-left:6rem;padding-right:6rem;}
.lg\:py-16{padding-top:4rem;padding-bottom:4rem;}
.lg\:text-3xl{font-size:1.875rem;line-height:2.25rem;}
.lg\:text-4xl{font-size:2.25rem;line-height:2.5rem;}
.lg\:text-\[3\.4rem\]{font-size:3.4rem;}
}




/* =========================================================
   WORK CASE STUDIES
   ========================================================= */

.work-card {
  height: 100%;
  overflow: hidden;
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.05);
  border-radius: 24px;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.05);
  transition:
    transform 0.28s ease,
    box-shadow 0.28s ease;
}

.work-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.10);
}

.work-card-trigger {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: inherit;
  cursor: pointer;
}

.work-card-trigger:focus-visible {
  outline: 3px solid #3C6E71;
  outline-offset: 4px;
}

.work-card-image {
  position: relative;
  height: 176px;
  overflow: hidden;
  flex-shrink: 0;
}

.work-card-image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}

.work-card:hover .work-card-image img {
  transform: scale(1.035);
}

.work-card-image-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.06);
  transition: background 0.3s ease;
}

.work-card:hover .work-card-image-overlay {
  background: rgba(0, 0, 0, 0.16);
}

.work-card-copy {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: center;
  padding: 20px 22px 22px;
  text-align: center;
}

.work-card-title {
  margin: 0;
  color: #000000;
  font-size: 16px;
  line-height: 1.35;
  font-weight: 600;
}

.work-card-subtitle {
  margin: 7px 0 0;
  color: #847577;
  font-size: 14px;
  line-height: 1.45;
}

.work-card-more {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 20px;
  color: #3C6E71;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.work-card-more span {
  transition: transform 0.25s ease;
}

.work-card:hover .work-card-more span {
  transform: translateX(4px);
}


/* =========================================================
   WORK MODAL
   ========================================================= */

.work-modal {
  width: min(940px, calc(100vw - 32px));
  max-width: 940px;
  max-height: 88vh;
  margin: auto;
  padding: 0;
  overflow: hidden;
  color: #000000;

  border: 1px solid rgba(255, 255, 255, 0.65);
  border-radius: 32px;

  background: rgba(223, 223, 223, 0.88);

  box-shadow:
    0 30px 90px rgba(0, 0, 0, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.65);

  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
}

.work-modal::backdrop {
  background: rgba(47, 10, 40, 0.38);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.work-modal[open] {
  animation: workModalIn 0.24s ease-out;
}

@keyframes workModalIn {
  from {
    opacity: 0;
    transform: translateY(14px) scale(0.985);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.work-modal-inner {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  max-height: 88vh;
  overflow: auto;
}

.work-modal-media {
  min-height: 100%;
  background: #2F0A28;
}

.work-modal-media img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 500px;
  object-fit: cover;
}

.work-modal-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 48px 46px 46px;
}

.work-modal-eyebrow {
  margin: 0 0 12px;
  color: #3C6E71;
  font-size: 10px;
  line-height: 1;
  font-weight: 700;
  letter-spacing: 0.28em;
  text-transform: uppercase;
}

.work-modal-title {
  margin: 0;
  padding-right: 28px;
  color: #000000;
  font-size: clamp(25px, 3vw, 36px);
  line-height: 1.12;
  font-weight: 600;
}

.work-modal-subtitle {
  margin: 13px 0 0;
  color: #847577;
  font-size: 14px;
  line-height: 1.5;
  font-weight: 500;
}

.work-modal-text {
  margin-top: 30px;
  color: #2F0A28;
  font-size: 14px;
  line-height: 1.75;
}

.work-modal-text p {
  margin: 0;
}

.work-modal-text p + p {
  margin-top: 18px;
}

.work-modal-close {
  position: absolute;
  top: 18px;
  right: 18px;
  z-index: 5;

  display: flex;
  align-items: center;
  justify-content: center;

  width: 42px;
  height: 42px;
  padding: 0;

  border: 1px solid rgba(255, 255, 255, 0.7);
  border-radius: 999px;

  background: rgba(255, 255, 255, 0.62);
  color: #000000;

  font-family: Arial, sans-serif;
  font-size: 26px;
  line-height: 1;

  cursor: pointer;

  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);

  transition:
    transform 0.2s ease,
    background 0.2s ease;
}

.work-modal-close:hover {
  transform: scale(1.06);
  background: rgba(255, 255, 255, 0.9);
}

.work-modal-close:focus-visible {
  outline: 3px solid #3C6E71;
  outline-offset: 3px;
}

body.work-modal-open {
  overflow: hidden;
}


/* Mobile */
@media (max-width: 767px) {

  .work-modal {
    width: calc(100vw - 24px);
    max-height: 90vh;
    border-radius: 26px;
  }

  .work-modal-inner {
    display: block;
    max-height: 90vh;
    overflow-y: auto;
  }

  .work-modal-media {
    height: 235px;
    min-height: 0;
  }

  .work-modal-media img {
    height: 235px;
    min-height: 0;
  }

  .work-modal-content {
    padding: 28px 24px 32px;
  }

  .work-modal-title {
    padding-right: 0;
    font-size: 25px;
  }

  .work-modal-text {
    margin-top: 24px;
  }

  .work-modal-close {
    top: 14px;
    right: 14px;
    width: 40px;
    height: 40px;
  }
}


/* Reduced motion accessibility */
@media (prefers-reduced-motion: reduce) {

  .work-card,
  .work-card-image img,
  .work-card-more span,
  .work-modal[open],
  .work-modal-close {
    animation: none;
    transition: none;
  }
}



/* =========================================================
   PREMIUM HERO
   ========================================================= */

.hero-premium {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(320px, 0.65fr);
  align-items: center;
  min-height: 430px;
  padding: 56px 62px;
  overflow: hidden;

  border-radius: 32px;

  background:
    radial-gradient(
      circle at 78% 35%,
      rgba(60, 110, 113, 0.18),
      transparent 32%
    ),
    linear-gradient(
      135deg,
      #2F0A28 0%,
      #3a0c31 55%,
      #260720 100%
    );

  color: #DFDFDF;

  box-shadow:
    0 24px 60px rgba(47, 10, 40, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
}


/* subtle texture / light */
.hero-premium::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;

  background:
    linear-gradient(
      115deg,
      transparent 0%,
      rgba(255,255,255,0.025) 40%,
      rgba(255,255,255,0.07) 50%,
      rgba(255,255,255,0.025) 60%,
      transparent 100%
    );

  transform: translateX(-70%);
  animation: heroShine 9s ease-in-out infinite;
}


@keyframes heroShine {
  0%,
  55% {
    transform: translateX(-80%);
  }

  80%,
  100% {
    transform: translateX(80%);
  }
}


/* =========================================================
   HERO TEXT
   ========================================================= */

.hero-content {
  position: relative;
  z-index: 5;
  max-width: 790px;
}

.hero-kicker {
  margin: 0 0 20px;

  color: rgba(223, 223, 223, 0.60);

  font-size: 10px;
  font-weight: 600;

  letter-spacing: 0.24em;
  text-transform: uppercase;
}

.hero-title {
  margin: 0;

  max-width: 820px;

  color: #DFDFDF;

  font-size: clamp(40px, 4.1vw, 60px);
  line-height: 1.04;
  letter-spacing: -0.035em;
  font-weight: 600;
}

.hero-title span {
  display: block;
}

.hero-description {
  max-width: 680px;

  margin: 26px 0 0;

  color: rgba(223, 223, 223, 0.78);

  font-size: 14px;
  line-height: 1.65;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;

  margin-top: 30px;
}

.hero-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  padding: 11px 22px;

  border-radius: 999px;

  font-size: 13px;
  font-weight: 600;

  text-decoration: none;

  transition:
    transform 0.25s ease,
    background 0.25s ease,
    border-color 0.25s ease,
    box-shadow 0.25s ease;
}

.hero-button:hover {
  transform: translateY(-2px);
}

.hero-button-primary {
  background: #3C6E71;
  color: #ffffff;

  box-shadow:
    0 8px 22px rgba(60, 110, 113, 0.26);
}

.hero-button-primary:hover {
  background: #467c7f;
}

.hero-button-secondary {
  border: 1px solid rgba(223, 223, 223, 0.34);

  background: rgba(255, 255, 255, 0.04);

  color: #DFDFDF;

  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.hero-button-secondary:hover {
  border-color: rgba(223, 223, 223, 0.55);

  background: rgba(255, 255, 255, 0.08);
}


/* =========================================================
   HERO VISUAL
   ========================================================= */

.hero-visual {
  position: relative;

  display: flex;
  align-items: center;
  justify-content: center;

  height: 330px;

  z-index: 2;
}

.hero-orbit-system {
  position: relative;

  width: 300px;
  height: 300px;
}


/* =========================================================
   GLASS CORE
   ========================================================= */

.hero-core {
  position: absolute;

  top: 50%;
  left: 50%;

  width: 132px;
  height: 132px;

  transform: translate(-50%, -50%);

  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 50%;

  background:
    radial-gradient(
      circle at 35% 25%,
      rgba(255, 255, 255, 0.24),
      rgba(255, 255, 255, 0.07) 42%,
      rgba(60, 110, 113, 0.11) 100%
    );

  box-shadow:
    0 16px 42px rgba(0, 0, 0, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.35);

  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);

  z-index: 5;
}

.hero-core-inner {
  display: flex;
  flex-direction: column;

  align-items: center;
  justify-content: center;

  width: 100%;
  height: 100%;
}

.hero-core-inner span {
  color: #DFDFDF;

  font-size: 26px;
  line-height: 1;

  font-weight: 600;
  letter-spacing: 0.05em;
}

.hero-core-inner small {
  margin-top: 5px;

  color: rgba(223, 223, 223, 0.58);

  font-size: 8px;
  letter-spacing: 0.28em;
}


/* =========================================================
   ORBITS
   ========================================================= */

.hero-orbit {
  position: absolute;

  top: 50%;
  left: 50%;

  border-radius: 50%;
  border: 1px solid rgba(223, 223, 223, 0.18);

  transform-origin: center;
}

.hero-orbit-one {
  width: 190px;
  height: 190px;

  margin-left: -95px;
  margin-top: -95px;

  animation: heroOrbitRotate 13s linear infinite;
}

.hero-orbit-two {
  width: 245px;
  height: 245px;

  margin-left: -122.5px;
  margin-top: -122.5px;

  border-color: rgba(60, 110, 113, 0.34);

  animation: heroOrbitRotateReverse 18s linear infinite;
}

.hero-orbit-three {
  width: 295px;
  height: 295px;

  margin-left: -147.5px;
  margin-top: -147.5px;

  border-color: rgba(223, 223, 223, 0.10);

  animation: heroOrbitRotate 25s linear infinite;
}


@keyframes heroOrbitRotate {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}


@keyframes heroOrbitRotateReverse {
  from {
    transform: rotate(360deg);
  }

  to {
    transform: rotate(0deg);
  }
}


/* =========================================================
   MOVING DOTS
   ========================================================= */

.hero-orbit-dot {
  position: absolute;

  top: -5px;
  left: 50%;

  width: 10px;
  height: 10px;

  margin-left: -5px;

  border-radius: 50%;

  background: #3C6E71;

  box-shadow:
    0 0 0 5px rgba(60, 110, 113, 0.12),
    0 0 18px rgba(60, 110, 113, 0.95);
}

.hero-orbit-two .hero-orbit-dot {
  width: 7px;
  height: 7px;

  top: auto;
  bottom: -3px;

  background: #DFDFDF;

  box-shadow:
    0 0 14px rgba(223, 223, 223, 0.55);
}

.hero-orbit-three .hero-orbit-dot {
  width: 6px;
  height: 6px;

  top: 50%;
  left: -3px;

  background: rgba(223, 223, 223, 0.65);

  box-shadow:
    0 0 15px rgba(223, 223, 223, 0.35);
}


/* =========================================================
   SIGNAL DOTS
   ========================================================= */

.hero-signal {
  position: absolute;

  display: block;

  width: 6px;
  height: 6px;

  border-radius: 50%;

  background: rgba(223, 223, 223, 0.75);

  box-shadow:
    0 0 18px rgba(223, 223, 223, 0.55);

  animation: heroSignalPulse 3s ease-in-out infinite;
}

.hero-signal-one {
  top: 48px;
  left: 44px;
}

.hero-signal-two {
  right: 31px;
  top: 100px;

  animation-delay: 0.9s;
}

.hero-signal-three {
  left: 74px;
  bottom: 36px;

  animation-delay: 1.7s;
}


@keyframes heroSignalPulse {
  0%,
  100% {
    opacity: 0.25;
    transform: scale(0.8);
  }

  50% {
    opacity: 1;
    transform: scale(1.5);
  }
}


/* =========================================================
   BACKGROUND GLOWS
   ========================================================= */

.hero-glow {
  position: absolute;

  border-radius: 50%;

  filter: blur(55px);

  pointer-events: none;

  animation: heroGlowFloat 8s ease-in-out infinite;
}

.hero-glow-one {
  width: 170px;
  height: 170px;

  background: rgba(60, 110, 113, 0.22);

  right: 18%;
  top: 6%;
}

.hero-glow-two {
  width: 120px;
  height: 120px;

  background: rgba(255, 255, 255, 0.09);

  right: 1%;
  bottom: 4%;

  animation-delay: 2.5s;
}


@keyframes heroGlowFloat {
  0%,
  100% {
    transform: translate3d(0, 0, 0);
  }

  50% {
    transform: translate3d(14px, -12px, 0);
  }
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 1024px) {

  .hero-premium {
    grid-template-columns: minmax(0, 1.2fr) minmax(260px, 0.8fr);

    padding: 48px 44px;
  }

  .hero-title {
    font-size: clamp(38px, 5vw, 50px);
  }

  .hero-orbit-system {
    transform: scale(0.85);
  }
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 767px) {

  .hero-premium {
    display: block;

    min-height: 0;

    padding: 38px 26px 26px;

    border-radius: 26px;
  }

  .hero-content {
    position: relative;
    z-index: 10;
  }

  .hero-kicker {
    margin-bottom: 16px;
  }

  .hero-title {
    font-size: 36px;
    line-height: 1.07;
  }

  .hero-description {
    margin-top: 20px;

    font-size: 13px;
  }

  .hero-actions {
    margin-top: 26px;
  }

  .hero-visual {
    height: 220px;

    margin-top: 24px;

    opacity: 0.86;
  }

  .hero-orbit-system {
    transform: scale(0.68);
  }
}


/* =========================================================
   ACCESSIBILITY
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

  .hero-premium::before,
  .hero-orbit-one,
  .hero-orbit-two,
  .hero-orbit-three,
  .hero-signal,
  .hero-glow {
    animation: none;
  }

}



/* =========================================================
   ABOUT – larger typography
   ========================================================= */

#about h2 {
  font-size: 42px;
  line-height: 1.12;
  letter-spacing: -0.025em;
}

#about h2 + p,
#about h2 + p + p {
  font-size: 17px;
  line-height: 1.65;
}

/* Tablet */
@media (max-width: 1024px) {
  #about h2 {
    font-size: 36px;
  }

  #about h2 + p,
  #about h2 + p + p {
    font-size: 16px;
  }
}

/* Mobile */
@media (max-width: 767px) {
  #about h2 {
    font-size: 30px;
    line-height: 1.15;
  }

  #about h2 + p,
  #about h2 + p + p {
    font-size: 15px;
    line-height: 1.65;
  }
}



/* =========================================================
   CLIENTS / EMPLOYERS
   ========================================================= */

.client-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 28px;
}

.client-card {
  position: relative;
  height: 176px;
  overflow: hidden;

  background: #F5F5F5;

  border: 1px solid rgba(0, 0, 0, 0.025);
  border-radius: 28px;

  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease,
    background 0.3s ease;
}

.client-card:hover {
  transform: translateY(-5px);

  background: rgba(245, 245, 245, 0.72);

  box-shadow:
    0 18px 38px rgba(0, 0, 0, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

.client-card-trigger {
  display: flex;
  align-items: center;
  justify-content: center;

  width: 100%;
  height: 100%;

  padding: 28px;

  border: 0;
  background: transparent;

  cursor: pointer;
}

.client-card-trigger:focus-visible {
  outline: 3px solid #3C6E71;
  outline-offset: -4px;
}

.client-card-trigger img {
  display: block;

  width: auto;
  max-width: 76%;

  height: auto;
  max-height: 86px;

  object-fit: contain;

  filter: none !important;
  opacity: 1 !important;

  transition:
    transform 0.42s cubic-bezier(.2,.8,.2,1),
    filter 0.3s ease;
}


/*
  Hover animation:
  small lift + rotation + scale
*/
.client-card:hover .client-card-trigger img {
  transform:
    translateY(-4px)
    rotate(-2deg)
    scale(1.09);
}


/*
  Small light sweep
*/
.client-card::after {
  content: "";

  position: absolute;
  inset: 0;

  pointer-events: none;

  background:
    linear-gradient(
      115deg,
      transparent 25%,
      rgba(255, 255, 255, 0.7) 48%,
      transparent 70%
    );

  transform: translateX(-130%);

  transition: transform 0.7s ease;
}

.client-card:hover::after {
  transform: translateX(130%);
}


/* =========================================================
   CLIENT MODAL
   ========================================================= */

.client-modal {
  width: min(760px, calc(100vw - 32px));
  max-width: 760px;

  margin: auto;
  padding: 0;

  overflow: hidden;

  border:
    1px solid rgba(255, 255, 255, 0.70);

  border-radius: 32px;

  background:
    rgba(223, 223, 223, 0.89);

  color: #000000;

  box-shadow:
    0 30px 90px rgba(0, 0, 0, 0.26),
    inset 0 1px 0 rgba(255, 255, 255, 0.78);

  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
}

.client-modal::backdrop {
  background: rgba(47, 10, 40, 0.38);

  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.client-modal[open] {
  animation: clientModalIn 0.25s ease-out;
}

@keyframes clientModalIn {

  from {
    opacity: 0;

    transform:
      translateY(14px)
      scale(0.985);
  }

  to {
    opacity: 1;

    transform:
      translateY(0)
      scale(1);
  }

}

.client-modal-inner {
  position: relative;

  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);

  min-height: 310px;
}


/* Logo side */
.client-modal-logo {
  display: flex;
  align-items: center;
  justify-content: center;

  padding: 38px;

  background:
    rgba(255, 255, 255, 0.52);

  border-right:
    1px solid rgba(255, 255, 255, 0.6);
}

.client-modal-logo img {
  display: block;

  max-width: 180px;
  max-height: 125px;

  width: auto;
  height: auto;

  object-fit: contain;
}


/* Text side */
.client-modal-content {
  display: flex;
  flex-direction: column;
  justify-content: center;

  padding: 48px 46px;
}

.client-modal-eyebrow {
  margin: 0 0 12px;

  color: #3C6E71;

  font-size: 10px;
  font-weight: 700;

  letter-spacing: 0.24em;
  text-transform: uppercase;
}

.client-modal-title {
  margin: 0;

  padding-right: 30px;

  color: #000000;

  font-size: 31px;
  line-height: 1.1;

  font-weight: 600;

  letter-spacing: -0.025em;
}

.client-modal-text {
  margin: 22px 0 0;

  color: #2F0A28;

  font-size: 15px;
  line-height: 1.7;
}


/* Close */
.client-modal-close {
  position: absolute;

  top: 17px;
  right: 17px;

  z-index: 4;

  display: flex;
  align-items: center;
  justify-content: center;

  width: 42px;
  height: 42px;

  padding: 0;

  border:
    1px solid rgba(255,255,255,0.75);

  border-radius: 999px;

  background:
    rgba(255,255,255,0.60);

  color: #000000;

  font-family: Arial, sans-serif;
  font-size: 26px;
  line-height: 1;

  cursor: pointer;

  backdrop-filter: blur(15px);
  -webkit-backdrop-filter: blur(15px);

  transition:
    transform 0.2s ease,
    background 0.2s ease;
}

.client-modal-close:hover {
  transform: scale(1.07);

  background:
    rgba(255,255,255,0.92);
}

.client-modal-close:focus-visible {
  outline: 3px solid #3C6E71;
  outline-offset: 3px;
}


/* =========================================================
   CLIENT RESPONSIVE
   ========================================================= */

@media (max-width: 1024px) {

  .client-grid {
    grid-template-columns:
      repeat(3, minmax(0, 1fr));
  }

}


@media (max-width: 767px) {

  .client-grid {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));

    gap: 16px;
  }

  .client-card {
    height: 138px;

    border-radius: 22px;
  }

  .client-card-trigger {
    padding: 20px;
  }

  .client-card-trigger img {
    max-width: 84%;
    max-height: 67px;
  }


  .client-modal {
    width:
      calc(100vw - 24px);

    border-radius: 26px;
  }

  .client-modal-inner {
    display: block;

    min-height: 0;
  }

  .client-modal-logo {
    height: 190px;

    padding: 30px;

    border-right: 0;

    border-bottom:
      1px solid rgba(255,255,255,0.65);
  }

  .client-modal-logo img {
    max-width: 190px;
    max-height: 100px;
  }

  .client-modal-content {
    padding:
      28px 24px 32px;
  }

  .client-modal-title {
    padding-right: 0;

    font-size: 27px;
  }

  .client-modal-text {
    margin-top: 18px;

    font-size: 14px;
  }

}


/* Accessibility */
@media (prefers-reduced-motion: reduce) {

  .client-card,
  .client-card-trigger img,
  .client-card::after,
  .client-modal[open],
  .client-modal-close {
    animation: none;
    transition: none;
  }

}



/* =========================================================
   APPROACH / PRINCIPLES TIMELINE
   ========================================================= */

.principles-timeline {
  position: relative;
  margin-top: 8px;
  padding: 6px 0;
}

.principles-timeline::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 2px;
  transform: translateX(-50%);
  background: linear-gradient(
    180deg,
    rgba(60, 110, 113, 0.15) 0%,
    rgba(60, 110, 113, 0.95) 18%,
    rgba(47, 10, 40, 0.55) 50%,
    rgba(60, 110, 113, 0.95) 82%,
    rgba(60, 110, 113, 0.15) 100%
  );
}

.principle-step {
  position: relative;
  margin: 0 0 22px;
}

.principle-step:last-child {
  margin-bottom: 0;
}

.principle-step:nth-child(odd) {
  padding-right: calc(50% + 42px);
}

.principle-step:nth-child(even) {
  padding-left: calc(50% + 42px);
}

.principle-step-dot {
  position: absolute;
  top: 34px;
  left: 50%;
  width: 18px;
  height: 18px;
  transform: translateX(-50%);
  border-radius: 50%;
  background: #3C6E71;
  border: 4px solid #DFDFDF;
  box-shadow:
    0 0 0 6px rgba(60, 110, 113, 0.10),
    0 10px 24px rgba(60, 110, 113, 0.22);
  z-index: 3;
}

.principle-step-card {
  position: relative;
  padding: 26px 28px 24px;
  border-radius: 28px;
  background: rgba(255, 255, 255, 0.76);
  border: 1px solid rgba(255, 255, 255, 0.85);
  box-shadow:
    0 16px 36px rgba(0, 0, 0, 0.06),
    inset 0 1px 0 rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  transition:
    transform 0.28s ease,
    box-shadow 0.28s ease,
    border-color 0.28s ease;
}

.principle-step-card:hover {
  transform: translateY(-3px);
  box-shadow:
    0 22px 48px rgba(0, 0, 0, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.95);
  border-color: rgba(60, 110, 113, 0.24);
}

/* short connector line from card to center line */
.principle-step-card::after {
  content: "";
  position: absolute;
  top: 42px;
  width: 28px;
  height: 2px;
  background: linear-gradient(
    90deg,
    rgba(60, 110, 113, 0.85),
    rgba(60, 110, 113, 0.22)
  );
}

.principle-step:nth-child(odd) .principle-step-card::after {
  right: -28px;
}

.principle-step:nth-child(even) .principle-step-card::after {
  left: -28px;
}

.principle-step-number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 52px;
  height: 30px;
  padding: 0 12px;
  margin-bottom: 14px;
  border-radius: 999px;
  background: rgba(60, 110, 113, 0.14);
  color: #3C6E71;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
}

.principle-step-title {
  margin: 0;
  color: #2F0A28;
  font-size: 22px;
  line-height: 1.15;
  font-weight: 600;
  letter-spacing: -0.02em;
}

.principle-step-text {
  margin: 12px 0 0;
  color: #5F5657;
  font-size: 15px;
  line-height: 1.7;
}

/* Tablet */
@media (max-width: 1024px) {
  .principle-step-title {
    font-size: 20px;
  }

  .principle-step-text {
    font-size: 14px;
  }
}

/* Mobile */
@media (max-width: 767px) {
  .principles-timeline::before {
    left: 14px;
    transform: none;
  }

  .principle-step,
  .principle-step:nth-child(odd),
  .principle-step:nth-child(even) {
    padding-left: 42px;
    padding-right: 0;
  }

  .principle-step-dot {
    left: 14px;
    top: 30px;
    transform: none;
  }

  .principle-step-card {
    padding: 22px 20px 20px;
    border-radius: 24px;
  }

  .principle-step-card::after {
    left: -22px !important;
    right: auto !important;
    top: 37px;
    width: 22px;
  }

  .principle-step-number {
    margin-bottom: 12px;
  }

  .principle-step-title {
    font-size: 19px;
  }

  .principle-step-text {
    margin-top: 10px;
    font-size: 14px;
    line-height: 1.65;
  }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .principle-step-card {
    transition: none;
  }
}