/* CSS for ScrubsOnCall\ScrubsOnline */
/*   default color:   socsol blue rgb(42,138,195); #2a8ac3;
     primary color:   ?socsol blue rgb(42,138,195); #2a8ac3;
     secondary color: socsol green rgb(110,190,78); #6ebe4e;
     alt color dark:  navy navy;
     alt color light: white #FFF;
     highlight color: lightgreen lightgreen;
*/

  :root{
    --primary: #2a8ac3;
    --secondary: #6ebe4e;
    --altdark: navy;
    --altlight: #ffffff;
    --highlight: lightgreen;
    --bg-color: #ffffff;
    --bg-image: url(/imgs/ScrubsOnCall_background.png);
    --bg-video: url(/vids/ScrubsOnCall_background.mp4);
    --overlay-bg: rgba(0,0,0,0.35); /* panel overlay color */
    --bar-bg: rgba(255,255,255,0.08); /* header/footer bar background (mostly transparent) */
    --glass-border: rgba(255,255,255,0.12);
    --gap: 12px;
    --safe-pad: 16px;
	  
    --content-h1: var(--primary);
    --content-h2: var(--secondary);
    --content-h3: var(--black);
    --content-text: var(--altdark);
    --content-background: lightblue;
    --content-highlight: aqua;

    --black:     #000000;
    --white:     #ffffff;
    --lightblue: lightblue;
    --navy:      #1a2e45;
    --teal:      #2a7f7f;
    --teal-lt:   #3a9e9e;
    --cream:     #f7f4ef;
    --warm-grey: #e8e4de;
    --text:      #2c2c2c;
    --muted:     #6b7280;
    --accent:    #c8963e;
    --sage:       #4a7c6f;
    --sage-lt:    #6a9e90;
    --sage-pale:  #edf4f2;
    --charcoal:   #1e2d2a;
    --warm-off:   #f5f2ee;
    --warm-mid:   #e8e2da;
    --rust:       #b8602a;
  }

  /* Reset */
  *{box-sizing:border-box;margin:0;padding:0}
  html,body{height:100%;height:100dvh;height:-webkit-fill-available;}
  input, select, textarea {font-size: 16px;}
  .iframe-container {
    position: relative;
    width: 100%;
    height: 100%;
  }
  .iframe-container iframe {
    width: 100%;
    height: 100%;
    height: 100dvh; /* Perfect fit for iOS Safari */
    border: 0;
  }

  body{
    min-height: 100vh;                   /* ultimate fallback */
    min-height: -webkit-fill-available;  /* iOS Safari 12–15 */
    min-height: 100svh;                  /* iOS 16+, Chrome 108+ */
    height: -webkit-fill-available;      /* fallback */
    height: 100dvh; /* Perfect fit for iOS Safari */    
    font-family: Montserrat, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    font-size: 1.5rem;
    font-weight: normal;
    color: var(--altlight);
    letter-spacing: .03em;
    /*background: center / cover no-repeat var(--bg-image);
    background-size: cover; /* explicit, survives the cascade */
    position:relative;
  }
  body.clientspartners {
	  --bg-image: url(/imgs/ScrubsOnCall_bg3.png);
  }
  body.about {
	  --bg-image: url(/imgs/ScrubsOnCall_bg1.png);
  }
  body.services {
	  --bg-image: url(/imgs/ScrubsOnCall_bg2.png);
  }
  body.contact {
	  --bg-image: url(/imgs/ScrubsOnCall_bg4.png);
  }
  body.why {
	  --bg-image: url(/imgs/ScrubsOnCall_bg4.png);
  }
  
  body strong {
	  font-weight: 500;
  }

  /* optional dark overlay over image for contrast */
  body::before{
    content:"";
    position:relative;
    inset:0;
	  background: linear-gradient(180deg, rgba(0,0,0,0.2), rgba(0,0,0,0.45));
    z-index:0;
    pointer-events:none;
    /* force GPU layer — prevents flicker on iOS Safari scroll */
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
  }
  
  body[class] {
	  background-size: cover;
	  background: center / cover repeat var(--bg-image);
  }
  
  body[class] header.bar,
  body[class] footer.bar  {
	  background: var(--altlight);
  }
  
  .bg-video {
	  position:fixed;
	  top:0;
	  left:0;
	  width:100vw;
    height: -webkit-fill-available;      /* iOS Safari */
    height: 100svh;
    height: 100dvh; /* Perfect fit for iOS Safari */ 
	  object-fit:cover;
	  z-index:-2;
	  background:black;
    background-image: url(/imgs/ScrubsOnCall_background.png);
  }

  /* header & footer bars (fixed, full width) */
  .bar {
    position:absolute;
    left:0;
    right:0;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:var(--gap);
    padding: calc(var(--safe-pad)/4) calc(var(--safe-pad));
    -webkit-backdrop-filter: blur(10px) saturate(0%); /* iOS Safari */
    backdrop-filter: blur(10px) saturate(0%);
    background: var(--bar-bg);
    border-bottom: 1px solid transparent;
    z-index: 40;
    overflow:hidden;
  }
  
  body[class] .bar {
     background: var(--altlight);
  }

  /* Apply padding to fixed headers/footers */
  /*header {
    padding-top: env(safe-area-inset-top);
    padding-bottom: env(safe-area-inset-bottom);
  }
  header nav.menu {
    padding-top: env(safe-area-inset-top);
    padding-bottom: env(safe-area-inset-bottom);
  }*/
  
  header.bar{
    min-height: 15%;
    max-height: 17%;
    top:0;
    border-bottom-color: var(--glass-border);
    padding-top: max(calc(var(--safe-pad) / 4), env(safe-area-inset-top));
    padding-left:  max(var(--safe-pad), env(safe-area-inset-left));
    padding-right: max(var(--safe-pad), env(safe-area-inset-right));
  }

  /*footer {
    padding-top: env(safe-area-inset-top);
    padding-bottom: env(safe-area-inset-bottom);
  }*/
  
  footer.bar{
    border-top: 1px solid transparent;
    border-top-color: var(--glass-border);
    width: 100%;
    display: block;
    padding-bottom: max(calc(var(--safe-pad) / 2), env(safe-area-inset-bottom));
    padding-left:   max(var(--safe-pad), env(safe-area-inset-left));
    padding-right:  max(var(--safe-pad), env(safe-area-inset-right));
  }
  
  footer.bar .slot-row {
     padding: 0.8rem;
  }

   footer.bar .slot-row .slot a.slot {
	    padding: 1px 6px;
		  font-size: 0.8em;
      font-weight: bold;
      background-color: var(--secondary);
      color: var(--primary);
   }

    footer.bar .slot-row .slot a.slot:hover {
        padding: 1px 6px;
        font-size: 0.8em;
        font-weight: bold;
        background-color: var(--primary);
        color: var(--secondary);
    }

  .bar .slot-row{
    display:flex;
    width:100%;
    max-width:1200px;
    min-width: 100%;
    margin: 0 auto;
    gap: var(--gap);
    align-items:center;
    justify-content:space-between;
    min-height: fit-content;
  }
  
  .btn{
    top: 15px;
    position: relative;
  }

  .btn,
  .bar .slot {
    min-width: 0;
    padding:8px 12px;
    text-align:center;
    border-radius:10px;
    transition: transform .18s ease, background .18s ease;
    user-select:none;
  }
  
  .bar .slot.center {
    text-align:center;
  }
  
  a,
  button {
    background: var(--altlight);
    color: var(--primary);
    text-decoration: none;
    cursor: pointer;
    pointer-events: auto;
  }
  
  header a {
    background: unset;
	  color: aliceblue;
  }
  
  a:hover,
  button:hover {
    background: var(--primary);
    color: var(--altlight);
    text-decoration: none;
  }
  
  header a:hover {
    background: unset;
    background-color: var(--secondary) !important;
    color: var(--primary) !important;
  }
  
  header a.active {
    background: unset;
    color: var(--highlight) !important;
    font-weight: 500;
  }
  
  #h-center {
    width: auto;
    background: var(--altlight);
    color: var(--primary);
    position: relative;
  }

  #h-left, #h-right {
    width: 10vw;
    height: calc(100% - 10px); /* fills header height minus a small margin */
    /*height: calc(100dvh - 10px); /* fills header height minus a small margin */
    aspect-ratio: 1 / 1;       /* forces a perfect square → circle */
    max-height: 20vh;
    max-height: 20dvh; /* Perfect fit for iOS Safari */
    background-size: contain; /*cover;*/
    background-repeat: no-repeat;
    background-position: center;
    padding: 0;
    margin: 0;
    cursor: pointer;
    border-radius: 50%;
    background-color: var(--altlight);
  }

  #h-left:hover,
  #h-right:hover {
    background-color: var(--altlight) !important;
  }

  #h-left img, #h-right img {
    width: 100%;
    height: 100%;
    height: 100vh; /* Fallback for older browsers */
    height: 100dvh; /* Perfect fit for iOS Safari */
    object-fit: contain;        /* shows FULL logo, no cropping */
  }
  
  #h-left {
    background-image: url(/imgs/SOC_new.png);
    margin-left: 5vw;
  }

  #h-right {
    background-image: url(/imgs/SOL_new.png);
    margin-right: 5vw;
  }

  /* main overlay container sits above background, centered */
  .main-overlay{
    top: 0;
    /*height: 100vh;
    height: -webkit-fill-available;
    height: 100svh;
    height: 100dvh; /* Perfect fit for iOS Safari */
    width: 100%;
    position: relative;
    align-items:center;
    justify-content:center;
    z-index: 30;
    /* pointer-events: none; /* allow specific children to accept clicks while container itself won't block things */
    pointer-events: auto;
  }
  
  body[class] .main-overlay {
    position: relative !important;
    display: block !important;
  }

  .panels{
    width: 100%;
    display:flex;
    gap: 1rem;
    pointer-events: auto; /* allow clicks inside */
	  /*height: 100%;
    height: 100vh;
    height: 100dvh; */
    height: calc(100% - 177px); 
    height: calc(100dvh - 177px); 
  }

  a.panel{
    display:block;
    flex:1 1 0;
    border-radius: 14px;
    overflow:hidden;
    position:relative;
    text-decoration:none;
    color:inherit;
    background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(0,0,0,0.15));
    border: 1px solid rgba(255,255,255,0.06);
    box-shadow: 0 8px 30px rgba(0,0,0,0.45);
    transition: transform .18s ease, box-shadow .18s ease;
    display:flex;
    align-items:center;
    justify-content:center;
  }
  
  a.panel:hover{
    /* transform: translateY(-6px) scale(1.01); */
    box-shadow: 0 18px 45px rgba(0,0,0,0.6);
	  color: var(--primary);
  }
  
  a.panel:hover > .inner {
    background: var(--altlight);
    opacity: 90%;
  }
  
  a.panel.emp-pnl:hover > .inner {
    background: var(--primary);
    color: var(--secondary);
  }

  a.panel.client-pnl:hover > .inner {
    background: var(--secondary);
    color: var(--primary);
  }

  .panel .inner {
    padding: 28px;
    width:100%;
    text-align:center;
    display:flex;
    flex-direction:column;
    gap:12px;
    align-items:center;
    justify-content:center;
    pointer-events:none; /* inner content shouldn't intercept link clicks */
  }
  
  .panel h2{
    margin:0;
    font-size: clamp(30px, 2.4vw, 45px);
    font-weight:600;
    letter-spacing:0.2px;
  }
  
  .panel p{
    margin:0;
    font-size: clamp(15px, 1.4vw, 20px);
    opacity:0.9;
  }

  .panel::after{
    content:"";
    position:absolute;
    inset:0;
    background: linear-gradient(180deg, rgba(255,255,255,0.01), rgba(0,0,0,0.25));
    mix-blend-mode: multiply;
    pointer-events:none;
  }

  a.panel:focus{
    outline: 3px solid rgba(255,255,255,0.14);
    outline-offset: 4px;
  }
  
	.hamburger,
	.menu {
	  display: none;
	}

	.menu {
	  position: relative;
	  left: 50%;
	  transform: translateX(-50%);
	  background: var(--primary);
	  backdrop-filter: blur(10px);
	  border-radius: 12px;
	  padding: 14px 0;
	  border: 2px solid rgb(110,190,78,0.15); /*rgba(255,255,255,0.15);*/
	  display: block;
	  flex-direction: column;
	  min-width: 160px;
	  box-shadow: 0 8px 30px rgb(110,190,78,0.4); /*rgba(0,0,0,0.4);*/
	  z-index: 300;
	  /*border: 2px solid var(--secondary) !important;*/
	}

	.menu a {
	  padding: 10px 10px;
	  color: var(--altlight);
	  text-decoration: none;
	  white-space: nowrap;
	  transition: background .2s ease;
	  font-size: 1.1rem;
	}

	.menu a:hover {
	  background: rgba(255,255,255,0.1);
	  border-radius: 8px;
	}
	
	.main {
		height: 100%;
    height: 100vh; /* Fallback for older browsers */
    height: 100dvh; /* Perfect fit for iOS Safari */
		width: 100%;
		position: relative;
		display: flex;
		align-items: center;
		justify-content: center;
		z-index: 30;
		pointer-events: none;
		margin-right: auto;
		margin-left: auto;
	}
	
	 body[class] .main {
		 display: block;
	 }
	
	
	.content-section {
	   position: relative;
	   display: block;
	   max-width: 100%;
	   width: 80%;
	   min-height: 100%;
     min-height: 100vh; /* Fallback for older browsers */
     min-height: 100dvh; /* Perfect fit for iOS Safari */
	   margin: 0 auto;
	   padding: 10% 10%;
	   padding-bottom: 20%;
	   /* background-size: cover;
	   background-repeat: no-repeat;
	   background-position: left center; */
	   /* background-image: url(/imgs/ScrubsOnCall_bg1.png); */
	   /* background-color: rgba(202, 250, 254, 0.7) !important; */
	   /* background-blend-mode: lighten; */
	   font-size: 1.5rem;
	}

	.content-section a {
    background: var(--altlight);
    color: var(--primary);
    margin-top: 10px;
    padding: 4px 8px;
    border-radius: 15px;
    border: 1px solid var(--secondary);
    display: inline-block;
  }

    .content-section a:hover {
      background: var(--secondary);
      color: var(--altlight);
    }
	
	.content-section form {
		font-size:1.1rem;
		color: black;
	}
	
	.content-section form div {
		margin: 1rem 0rem;
	}
	
	.content-section form div label {
		color: var(--altdark);
	}
	
	.content-section .full-width {
		width: 100%;
	}
	.content-section .half-width {
		width: 49%;
		margin-right: 1%;
		float: left;
		clear: right;
	}
	.content-section .quarter-width {
		width: 25%;
		margin-right: 1%;
		float: left;
		clear: right;
	}
	
	.content-section.tab-0 {
		display: block;
		width: 100%;
		height: 1%;
    height: 1vh; /* Fallback for older browsers */
    height: 1dvh; /* Perfect fit for iOS Safari */
	}
	.content-section.tab-1 {
		display: none;
		width: 100%;
		height: 100%;
    height: 100vh; /* Fallback for older browsers */
    height: 100dvh; /* Perfect fit for iOS Safari */
	}
	.content-section.tab-1.active {
		display: block;
		width: 100%;
		height: 100%;
    height: 100vh; /* Fallback for older browsers */
    height: 100dvh; /* Perfect fit for iOS Safari */
	}
	.content-section.tab-2 {
		display: none;
		width: 100%;
		height: 100%;
    height: 100vh; /* Fallback for older browsers */
    height: 100dvh; /* Perfect fit for iOS Safari */
	}
	.content-section.tab-2.active  {
		display: block;
		width: 100%;
		height: 100%;
    height: 100vh; /* Fallback for older browsers */
    height: 100dvh; /* Perfect fit for iOS Safari */
	}
	
	section {
	  display:block;
    border-radius: 50px;
	  padding: 1rem 1rem;
	  max-width: 100%;
	  margin: 1rem;
	  color: var(--content-text);
    background-color: var(--content-background);
	}
	
	section h1 {
		color: var(--content-h1);
		font-size: 2.1rem;
		margin-bottom: 10px;
		margin-top: 15px;
		font-weight: 700;
		line-height: 1.3;
	}
	section h2 {
		color: var(--content-h2);
		font-size: 2rem;
		margin-bottom: 5px;
		margin-top: 10px;
		font-weight: 700;
		line-height: 1.2;
	}
	section h3 {
		color: var(--content-h3);
		font-size: 1.7rem;
		margin-bottom: 5px;
		margin-top: 5px;
		font-weight: 700;
		line-height: 1.1;
    display: inline-block;
	}

  section .card {
    padding: 10px 20px;
  }

  section .value-card h3 {
    display: block;
  }
	
	section strong {
		font-weight: 500;
	}

  .fa-solid.fa-calendar-check,
  .fa-solid.fa-people-group {
    color: var(--secondary);
  }
  .fa-solid.fa-dollar-sign,
  .fa-solid.fa-bolt {
    color: gold;
  }
  .fa-solid.fa-heart,
  .fa-solid.fa-shield-heart {
    color: red;
  }

	main:has(div.clientspartners) {
		align-items: end;
	}
	
	.clientspartners > div {
		display: flex;
		flex-direction: row;
		width: 100%;
	}

	.clientspartners > div > div {
		display: flex;
		flex-direction: column;
		width: 20%;
		margin-left: 3%;
	}

	.clientspartners a img {
		width: 100%;
		height: 100%;
		background: var(--altdark);
	}

	.clientspartners label	 {
		text-align: center;
		width: 100%;
		margin-top: 5px;
		color: var(--content-text);
		font-weight: 500;
	}
	
	.link-list {
		margin-top: 5px;
    margin-bottom: 5px;
	}
	
	.link-list a,
	button.link-btn {
		border-radius: 10px;
		border: 1px solid var(--secondary);
		padding: 5px 15px;
	}
	
	a.link-left {
		float: left;
		border-radius: 10px;
		border: 1px solid var(--secondary);
		padding: 5px 15px;
		margin: 1rem;
	}

  .content-section a.link-left {
		float: none;
	}
	
	a.link-right {
		float: right;
		border-radius: 10px;
		border: 1px solid var(--secondary);
		padding: 5px 15px;
		margin: 1rem;
	}
	
	.link-btn,
	a.link-btn {
		border-radius: 10px;
		border: 1px solid var(--secondary);
		/* padding: 2px 10px; */
		padding: 5px 15px;
		margin: 2rem;
		font-size: 1rem;
	}
	
	footer {
		font-size: 1rem;
		color: var(--altlight);
	}
	
	body[class] footer .footer{
		background: var(--altlight);
		color: var(--primary);
	}

    .intro {
      text-align: center;
      max-width: 800px;
      margin: auto;
    }

    .values {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
      gap: 1rem;
      margin-top: 1rem;
    }

    .value-card {
      background: var(--secondary);
      padding: 2rem;
      border-radius: 12px;
      text-align: center;
	    font-size: 1.8rem;
    }

    .value-card i {
      font-size: 2rem;
      color: var(--primary);
      margin-bottom: 1rem;
    }

	.value-card p {
	  font-size: 1.2rem;
	  margin-bottom: 1rem;
    color: var(--altdark);
	}

    .founders {
      display: flex;
      grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
      gap: 1rem;
      margin-top: 1rem;
    }

    .founder-card {
      background: var(--altlight);
      border-radius: 12px;
      overflow: hidden;
      box-shadow: 0 10px 25px rgba(0,0,0,0.08);
	    width: 25%;
    }

    .founder-card img {
      width: 100%;
      height: 200px;
      object-fit: cover;
    }

    .founder-content {
      padding: 1rem;
    }

    .founder-content h3 {
      margin-bottom: 0.2rem;
      font-weight: 500;
    }

    .founder-content span {
      color: var(--altdark);
      font-size: 0.8rem;
      font-weight: bold;
    }

    .founder-content p {
      margin-top: 0.7rem;
      font-size: 0.9rem;
    }
	
	.slot-row.cta {
		background: var(--primary);
		border-radius:10px;
	}
	
	.slot-row.cta.emp-cta {
		background: #2a8ac3 !important;
		color: #fff !important;
	}
	.slot-row.cta.client-cta {
		background: #6ebe4e !important;
		color: #000 !important;
	}
	
	.slot-row.cta h2 {
		max-width: 30%;
		clear: right;
		float: left;
		font-weight: 500;
	}
	
	.slot-row.cta p {
		max-width: 40%;
		float: left;
	}
	
	.slot-row.cta div,
	.slot-row.cta .link-list {
		max-width: 30%;
		float: right;
		font-weight: 500;
	}
	
	.slot-row.cta div a:hover,
	.slot-row.cta .link-list a:hover {
		background: var(--secondary);
		color: var(--primary);
		border-color: var(--secondary);
		font-weight: 500;
	}
	
	.slot-row.cta.client-cta div a:hover,
	.slot-row.cta.client-cta .link-list a:hover {
		background: var(--primary);
		color: var(--altlight);
		border-color: var(--secondary);
		font-weight: 500;
	}
	
	.slot-row.footer {
		max-height: 8%;
	}

.hero {
  background: linear-gradient(135deg, var(--navy) 0%, var(--teal) 100%);
  padding: 4rem 2rem 3.5rem;
  text-align: center;
  position: relative;
  overflow: hidden;
}

.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.04'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}

.hero-eyebrow {
  font-size: .75rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--teal-lt);
  margin-bottom: .75rem;
}

.hero h1 {
  font-family: 'Playfair Display', serif;
  font-size: clamp(1.8rem, 4vw, 2.8rem);
  color: var(--white);
  font-weight: 600;
  margin-bottom: 1rem;
}

.hero-sub {
  color: rgba(255,255,255,.7);
  font-size: .95rem;
  max-width: 560px;
  margin: 0 auto;
}

.hero-date {
  display: inline-block;
  margin-top: 1.5rem;
  background: rgba(255,255,255,.1);
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 20px;
  padding: .3rem 1rem;
  font-size: .78rem;
  color: rgba(255,255,255,.65);
  letter-spacing: .05em;
}

.page-wrap {
  max-width: 860px;
  margin: 0 auto;
  padding: 3rem 2rem 5rem;
}

.info-box {
  color: var(--primary);
}

.note-box {
  color: var(--secondary);
}

.toc {
  background: var(--white);
  border-left: 4px solid var(--teal);
  border-radius: 0 8px 8px 0;
  padding: 1.5rem 2rem;
  margin-bottom: 3rem;
  box-shadow: 0 2px 12px rgba(0,0,0,.06);
}

.toc-title {
  font-family: 'Playfair Display', serif;
  font-size: 1rem;
  color: var(--navy);
  margin-bottom: .75rem;
  font-weight: 600;
}

.toc-list {
font-size: 0.6em;
}

.toc ol {
  padding-left: 1.2rem;
}

.toc li {
  margin-bottom: .35rem;
}

.toc a {
  color: var(--teal);
  text-decoration: none;
  font-size: .9rem;
  transition: color .2s;
}

.toc a:hover { color: var(--navy); text-decoration: underline; }

.section {
  background: var(--white);
  border-radius: 10px;
  padding: 2.2rem 2.5rem;
  margin-bottom: 1.5rem;
  box-shadow: 0 2px 10px rgba(0,0,0,.05);
  scroll-margin-top: 90px;
}

.section-header {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  margin-bottom: 1.2rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--warm-grey);
}

.section-num {
  width: 32px;
  height: 32px;
  background: var(--teal);
  border-radius: 50%;
  color: white;
  font-size: .8rem;
  font-weight: 500;
  display: flex; 
  align-items: center; 
  justify-content: center;
  flex-shrink: 0;
  margin-top: .1rem;
}

.section h2 {
  font-family: 'Playfair Display', serif;
  font-size: 1.25rem;
  color: var(--navy);
  font-weight: 600;
}

.section p {
  font-size: .95rem;
  color: var(--text);
  margin-bottom: .85rem;
}

.section p:last-child { margin-bottom: 0; }

.section ul {
  padding-left: 1.4rem;
  margin-bottom: .85rem;
}

.section ul li {
  font-size: .95rem;
  margin-bottom: .4rem;
  color: var(--text);
}

.section ul li::marker { color: var(--teal); }

.callout {
  background: #eef7f7;
  border: 1px solid #b2d8d8;
  border-radius: 8px;
  padding: 1rem 1.25rem;
  margin: 1rem 0;
  font-size: .9rem;
  color: #1f5c5c;
}

.callout strong { color: var(--navy); }

.warning {
  background: #fef9ec;
  border: 1px solid #f0d070;
  border-radius: 8px;
  padding: 1rem 1.25rem;
  margin: 1rem 0;
  font-size: .9rem;
  color: #7a5f10;
}

.logo-mark svg { width: 18px; height: 18px; fill: var(--sage-lt); }

.outer {
  max-width: 1060px;
  margin: 0 auto;
  padding: 3.5rem 2rem 6rem;
  /* display: grid; */
  /* grid-template-columns: 220px 1fr; */
  gap: 3rem;
  /* align-items: start; */
}

.sidebar {
  top: 90px;
}

.toc-compliance {
  margin-top: 1.25rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--warm-mid);
}

.compliance-label {
  font-size: .68rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: .6rem;
}

.compliance-badge {
  background: var(--sage-pale);
  border-radius: 6px;
  padding: .5rem .7rem;
  font-size: .75rem;
  color: var(--sage);
  margin-bottom: .4rem;
  font-weight: 400;
}

.s-icon {
  width: 36px; height: 36px;
  border-radius: 8px;
  background: var(--sage-pale);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}

.s-icon svg {
  width: 18px; height: 18px;
  fill: var(--sage);
}

.section-body {
  padding: 1.6rem 2rem;
}

.section-body p {
  font-size: .92rem;
  margin-bottom: .9rem;
  color: var(--text);
}

.section-body p:last-child { margin-bottom: 0; }

.section-body ul, .section-body ol {
  padding-left: 1.3rem;
  margin-bottom: .9rem;
}

.section-body li {
  font-size: .92rem;
  margin-bottom: .4rem;
  color: var(--text);
}

.section-body li::marker { color: var(--sage); }

.rights-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .6rem;
  margin: .9rem 0;
}

.right-item {
  display: flex;
  align-items: flex-start;
  gap: .6rem;
  background: var(--warm-off);
  border-radius: 8px;
  padding: .75rem .9rem;
}

.right-check {
  width: 20px; height: 20px;
  background: var(--sage);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  margin-top: .1rem;
}

.right-check svg { width: 11px; height: 11px; fill: white; }

.right-text {
  font-size: .85rem;
  color: var(--text);
  line-height: 1.4;
}

.social-footer {
  background-color: transparent;
  color: white;
  padding: 1px 0;
  text-align: center;
}

.footer-content h3 {
  margin-bottom: 5px;
  font-family: sans-serif;
  font-weight: 300;
}

.social-links {
  display: flex;
  justify-content: center;
  gap: 20px; /* Space between icons */
}

.social-icon {
  background: transparent;
  color: var(--secondary);
  font-size: 24px;
  transition: transform 0.3s ease, color 0.3s ease;
  text-decoration: none;
}

.social-icon:hover {
  background: transparent;
  transform: translateY(-5px); /* Gentle lift */
  color: var(--primary);
}

@media (max-width: 1024px) {
  #h-left, #h-right {
    width: 15vw;
    min-height: 11vh;
    min-height: 11vh; /* Fallback for older browsers */
    min-height: 11dvh; /* Perfect fit for iOS Safari */
    max-height: 15vh;
    max-height: 15vh; /* Fallback for older browsers */
    max-height: 15dvh; /* Perfect fit for iOS Safari */
    /*background-size: cover;*/
  }
}
@media (max-width: 1024px) and (max-height: 800px) {
  #h-left, #h-right {
    width: 10vw;
    min-height: 15vh;
    min-height: 15vh; /* Fallback for older browsers */
    min-height: 15dvh; /* Perfect fit for iOS Safari */
    /*background-size: cover;*/
  }
}

@media (max-width: 1000px) {
  #h-left, #h-right {
    border-radius: 0;
    width: 10vw;
    min-height: 15vh;
    min-height: 15vh; /* Fallback for older browsers */
    min-height: 15dvh; /* Perfect fit for iOS Safari */
    /*background-size: cover;*/
  }
}

@media (max-width: 920px) {
  footer.bar .slot-row.cta {
    display: block;
  }
}

/* small screens: stack panels vertically, shrink header slots */
@media (max-width:900px){

  .panels {
    width: 100%;
  }

  .bar .slot-row{
		padding:0 8px;
		display: flex;
	}

  .bar{padding:10px}

  .bar .slot{padding:6px 8px; flex: 1 1 0;}

  header.bar {overflow:visible;}

  header.bar .slot-row, footer.bar .slot-row{align-items:center}
	
	.btn {
		font-size: 1.2rem;
	}
	
	.main-overlay {
	  position: relative;
  }
	
	footer.bar .slot-row {
		display: inline-flex;
		letter-spacing: 0;
    padding: 0.3rem;
	}

  footer.bar .slot-row.cta {
    display: block;
  }
	
	footer.bar .slot-row .slot {
		margin: 5px 0px;
	} 

	header.bar .slot.center {
		text-align: center;
		max-width: 100px !important;
	}
	
	.hamburger {
	  width: auto;
	  height: 24px;
	  display: flex;
	  flex-direction: column;
	  justify-content: space-between;
	  cursor: pointer;
	  z-index: 200;
	  padding: 4px;
	  margin: 0 25%;
  }
	
	.hamburger span {
	  height: 3px;
	  width: 100%;
	  background: var(--primary);
	  border-radius: 3px;
	  transition: 0.3s ease;
  }
	
	.hamburger.active {
	  width: 34px;
	  height: 30px;
	}
	
	.hamburger.active span:nth-child(1) {
	  transform: translateY(10px) rotate(45deg);
	}

	.hamburger.active span:nth-child(2) {
	  opacity: 0;
	}

	.hamburger.active span:nth-child(3) {
	  transform: translateY(-10px) rotate(-45deg);
	}
	
	.menu {
	  position: absolute;
	  top: 48px;
	  left: 50%;
	  transform: translateX(-50%);
	  backdrop-filter: blur(10px);
	  border-radius: 12px;
	  padding: 14px 0;
	  border: 1px solid rgba(255,255,255,0.15);
	  flex-direction: column;
	  min-width: 160px;
	  box-shadow: 0 8px 30px rgba(0,0,0,0.4);
	  z-index: 300;
	  display: none;
	}
	
	.menu a {
	  padding: 10px 18px;
	  color: var(--altlight);
	  text-decoration: none;
	}
	
	.menu.open {
	  display: flex;
	}
	
	.bg-video {
	  object-fit:cover;
	}
	
  .content-section {
	   width: 100%;
	   margin: 0 auto;
	   padding: 20% 5%;
	}
	
	.founders {
		display: block;
		margin-top: 1rem;
		margin-bottom: 1rem;
	}
	
	.founder-card {
	  width: 100%;
	  margin-top: 2rem;
	}
	
	.slot-row.cta h2 {
		max-width: 100%;
		clear: unset;
		float: unset;
	}
	
	.slot-row.cta p {
		max-width: 100%;
		float: unset;
	}
	
	.slot-row.cta div, 
	.slot-row.cta .link-list {
		max-width: 100%;
		float: unset;
    margin-top: 5px;
    margin-bottom: 5px;
	}
	
	.link-btn, a.link-btn {
		margin: 0;
	}
}

@media (max-width:600px) {

  .bar .slot {padding:1px 6px; flex: 1 1 0;}

  .panels {
    width: 100%;
  }

  a.panel { min-height:220px }
	
	header.bar .slot.center {
		text-align: center;
		max-width: 12% !important;
	}
	
	.hamburger {
	  margin: 0 0%;
  }
	
	.slot-row.cta h2 {
		max-width: 100%;
		clear: unset;
		float: unset;
	}
	
	.slot-row.cta p {
		max-width: 100%;
		float: unset;
	}
	
	.slot-row.cta div, 
	.slot-row.cta .link-list {
		max-width: 100%;
		float: unset;
	}
	
	.link-btn, a.link-btn {
		margin: 0;
	}
	
	.link-list {
		margin-top: 22px;
	}
	
	footer {
		font-size: 0.7rem;
	}

	.content-section {
	   width: 100%;
	   margin: 0 auto;
	   padding: 1% 1%;
	}
	
  .content-section,
  .content-section.why,
  .content-section.about {
     margin-top: 25%;
     padding-bottom: 100%;
  }
  
  .content-section.clientspartners {
     margin-top: 40%;
  }
	
  .section-body { padding: 1.25rem 1.25rem; }
  .section-head { padding: 1.1rem 1.25rem; }

  .rights-grid {
    display: block;
  }

  .outer {
    padding: 3.5rem 2rem 18rem;
  }
}

@media (hover: hover) {
    .button:hover {
        background-color: var(--secondary); /* Only triggers on Windows/Desktop */
    }
}