/* AssafShami.com final polish — 2026-10-18d */

/* 1) Sticky header + logo blend */
.site-header.is-scrolled{
  background:#fff !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
}
.site-header.is-scrolled .brand-logo-link{
  background:#fff !important;
}

/* 2) Mobile page should move vertically only, never side-to-side */
html,
body{
  width:100% !important;
  max-width:100% !important;
  overflow-x:hidden !important;
  overscroll-behavior-x:none !important;
}
body{
  position:relative;
  touch-action:pan-y pinch-zoom;
}
main,
header,
footer,
section,
.wrap{
  max-width:100% !important;
}
img,
video,
iframe,
svg,
canvas{
  max-width:100% !important;
}
@supports (overflow:clip){
  html,body{overflow-x:clip !important;}
}

/* Keep the portal menu independently scrollable when it is open. */
body.nav-open{touch-action:none !important;}
body > #site-navigation.mobile-nav-portal{touch-action:pan-y !important;}

/* 3) Owner Mode — true five-step circular wheel */
.owner-wheel-five{
  position:relative;
  width:100%;
  max-width:570px;
  aspect-ratio:1/1;
  margin:0 auto;
  overflow:visible !important;
  border-radius:50%;
  border:1px solid #cbd5e1;
  background:
    radial-gradient(circle at center, #f8fbff 0 34%, transparent 34.5%),
    radial-gradient(circle at center, transparent 0 53%, rgba(36,108,242,.07) 53.5% 67%, transparent 67.5%),
    linear-gradient(145deg,#fbfdff,#eef3f8);
  box-shadow:0 28px 70px rgba(22,40,59,.16);
  isolation:isolate;
}
.owner-wheel-five .owner-wheel-ring{
  position:absolute;
  inset:13%;
  border:2px solid rgba(36,108,242,.20);
  border-radius:50%;
  pointer-events:none;
}
.owner-wheel-five .owner-wheel-ring::after{
  content:"";
  position:absolute;
  inset:7%;
  border:1px dashed rgba(36,108,242,.16);
  border-radius:50%;
}
.owner-wheel-five .owner-wheel-steps{
  position:absolute;
  inset:0;
  display:block !important;
}
.owner-wheel-five .owner-step{
  position:absolute !important;
  width:clamp(108px,27%,148px);
  min-height:clamp(82px,19%,104px);
  padding:12px 10px !important;
  display:flex !important;
  flex-direction:column;
  align-items:center !important;
  justify-content:center !important;
  text-align:center !important;
  border:1px solid rgba(23,49,75,.12) !important;
  border-radius:18px !important;
  background:rgba(255,255,255,.96) !important;
  box-shadow:0 12px 28px rgba(22,40,59,.10);
  transform:translate(-50%,-50%);
  z-index:3;
}
.owner-wheel-five .owner-step-1{left:50%;top:12%;}
.owner-wheel-five .owner-step-2{left:84%;top:36%;}
.owner-wheel-five .owner-step-3{left:71%;top:79%;}
.owner-wheel-five .owner-step-4{left:29%;top:79%;}
.owner-wheel-five .owner-step-5{left:16%;top:36%;}

.owner-wheel-five .owner-step img,
.owner-wheel-five .owner-step-symbol{
  width:auto !important;
  height:clamp(28px,7vw,42px) !important;
  max-width:48px !important;
  margin:0 0 5px !important;
  object-fit:contain;
}
.owner-wheel-five .owner-step-symbol{
  display:grid;
  place-items:center;
  color:var(--blue);
  font:700 clamp(28px,6vw,40px)/1 var(--sans);
}
.owner-wheel-five .owner-step strong{
  margin:0 0 3px !important;
  color:var(--navy) !important;
  font:600 clamp(14px,2vw,20px)/1.05 var(--serif) !important;
}
.owner-wheel-five .owner-step small{
  max-width:100px !important;
  color:#66717e !important;
  font-size:clamp(8px,1.25vw,11px) !important;
  line-height:1.2 !important;
}
.owner-wheel-five.owner-has-active .owner-step{opacity:.58;filter:saturate(.7);}
.owner-wheel-five .owner-step.is-active{
  opacity:1 !important;
  filter:none !important;
  transform:translate(-50%,-50%) scale(1.07) !important;
  border-color:rgba(36,108,242,.35) !important;
  box-shadow:0 16px 36px rgba(22,40,59,.16) !important;
}
.owner-wheel-five .owner-center{
  position:absolute !important;
  left:50% !important;
  top:50% !important;
  transform:translate(-50%,-50%) !important;
  width:34% !important;
  aspect-ratio:1/1 !important;
  height:auto !important;
  border-radius:50% !important;
  background:var(--navy) !important;
  color:#fff !important;
  display:grid !important;
  place-items:center !important;
  text-align:center !important;
  z-index:5 !important;
  box-shadow:0 14px 34px rgba(15,29,43,.22) !important;
}
.owner-wheel-five .owner-center > div{padding:14px !important;}
.owner-wheel-five .owner-center strong{
  color:#fff !important;
  font-size:clamp(17px,3vw,27px) !important;
  line-height:.95 !important;
}
.owner-wheel-five .owner-center span{
  display:block !important;
  max-width:120px !important;
  margin:8px auto 0 !important;
  color:#dbe7f4 !important;
  font-size:clamp(5px,.75vw,7px) !important;
  line-height:1.25 !important;
  letter-spacing:.04em !important;
}

/* Neutralize old quadrant/arrow mechanics inside the new wheel. */
.owner-wheel-five .flow-arrow{display:none !important;}
.owner-wheel-five .owner-quadrant{border-right:1px solid rgba(23,49,75,.12) !important;border-bottom:1px solid rgba(23,49,75,.12) !important;}

@media(max-width:980px){
  .owner-wheel-five{max-width:500px;}
}
@media(max-width:600px){
  .owner-wheel-five{
    width:min(100%,390px);
    max-width:390px;
  }
  .owner-wheel-five .owner-step{
    width:29%;
    min-height:78px;
    padding:9px 7px !important;
    border-radius:14px !important;
  }
  .owner-wheel-five .owner-step-1{top:11%;}
  .owner-wheel-five .owner-step-2{left:83%;top:35%;}
  .owner-wheel-five .owner-step-3{left:70%;top:79%;}
  .owner-wheel-five .owner-step-4{left:30%;top:79%;}
  .owner-wheel-five .owner-step-5{left:17%;top:35%;}
  .owner-wheel-five .owner-center{width:35% !important;}
  .owner-wheel-five .owner-step strong{font-size:clamp(12px,3.7vw,16px) !important;}
  .owner-wheel-five .owner-step small{font-size:clamp(7px,2.2vw,9px) !important;}
  .owner-wheel-five .owner-step img,
  .owner-wheel-five .owner-step-symbol{height:clamp(24px,8vw,32px) !important;}
}
@media(max-width:360px){
  .owner-wheel-five .owner-step{width:30%;min-height:72px;}
  .owner-wheel-five .owner-center{width:36% !important;}
}


/* ==========================================================
   OWNER MODE WHEEL — ICON + DIRECTION REFINEMENT
   ========================================================== */

.owner-wheel-five{
  overflow:visible !important;
}

/* Clockwise direction arc: starts at Clarity and runs to Freedom via the right side. */
.owner-wheel-five .owner-wheel-direction{
  position:absolute !important;
  inset:4.8% !important;
  width:90.4% !important;
  height:90.4% !important;
  z-index:1 !important;
  pointer-events:none !important;
  overflow:visible !important;
}

.owner-wheel-five .owner-wheel-direction-path{
  fill:none !important;
  stroke:rgba(36,108,242,.42) !important;
  stroke-width:1.3 !important;
  stroke-linecap:round !important;
  stroke-dasharray:2.2 2.1 !important;
}

.owner-wheel-five .owner-wheel-direction marker path,
.owner-wheel-five #owner-wheel-arrowhead path{
  fill:#246cf2 !important;
}

/* Outer step cards stay above the direction arc. */
.owner-wheel-five .owner-wheel-steps,
.owner-wheel-five .owner-step{
  z-index:3 !important;
}

/* Consistency now uses the same image treatment as the other four stages. */
.owner-wheel-five .owner-step-4 img{
  width:auto !important;
  height:clamp(30px,5vw,44px) !important;
  object-fit:contain !important;
  display:block !important;
  margin:0 auto 4px !important;
}

/* Center circle should contain only OWNER MODE™. */
.owner-wheel-five .owner-center span{
  display:none !important;
}

.owner-wheel-five .owner-center > div{
  display:grid !important;
  place-items:center !important;
  width:100% !important;
  height:100% !important;
  padding:10px !important;
}

.owner-wheel-five .owner-center strong{
  margin:0 !important;
  text-align:center !important;
  letter-spacing:.01em !important;
}

/* Keep arc subtle and readable on smaller devices. */
@media(max-width:600px){
  .owner-wheel-five .owner-wheel-direction{
    inset:5.5% !important;
    width:89% !important;
    height:89% !important;
  }
  .owner-wheel-five .owner-wheel-direction-path{
    stroke-width:1.5 !important;
    stroke-dasharray:2.4 2.2 !important;
  }
  .owner-wheel-five .owner-step-4 img{
    height:clamp(24px,8vw,32px) !important;
  }
}


/* ==========================================================
   v20261018e FINAL MERGE
   ========================================================== */

/* Logo framework line: visually replace the baked 4-step line with the 5-step line. */
.brand-logo-link{
  position:relative !important;
}
.brand-logo-link .brand-framework-overlay{
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:15%;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:0 2px;
  background:#fff;
  color:#246cf2;
  font-size:6px;
  font-weight:800;
  letter-spacing:.055em;
  line-height:1;
  white-space:nowrap;
  pointer-events:none;
}

.footer-logo-panel{
  position:relative !important;
  overflow:hidden;
}
.footer-logo-panel .footer-framework-overlay{
  position:absolute;
  left:18px;
  right:18px;
  bottom:15px;
  height:16%;
  display:flex;
  align-items:center;
  justify-content:center;
  background:#fff;
  color:#246cf2;
  font-size:7px;
  font-weight:800;
  letter-spacing:.065em;
  line-height:1;
  white-space:nowrap;
  pointer-events:none;
}

@media(max-width:640px){
  .brand-logo-link .brand-framework-overlay{
    font-size:4.7px;
    letter-spacing:.035em;
  }
}

/* Remove the previous large circular arrow completely. */
.owner-wheel-five .owner-wheel-direction{
  display:none !important;
}

/* Small arrows between each stage, following the clockwise journey. */
.owner-wheel-five .owner-wheel-step-arrow{
  position:absolute;
  z-index:2;
  color:#246cf2;
  font:700 clamp(18px,2vw,24px)/1 var(--sans);
  opacity:.78;
  pointer-events:none;
  transform-origin:center;
  text-shadow:0 2px 10px rgba(36,108,242,.10);
}

.owner-wheel-five .owner-wheel-arrow-1{
  left:70%;
  top:19%;
  transform:translate(-50%,-50%) rotate(34deg);
}
.owner-wheel-five .owner-wheel-arrow-2{
  left:82%;
  top:58%;
  transform:translate(-50%,-50%) rotate(106deg);
}
.owner-wheel-five .owner-wheel-arrow-3{
  left:50%;
  top:82%;
  transform:translate(-50%,-50%) rotate(180deg);
}
.owner-wheel-five .owner-wheel-arrow-4{
  left:18%;
  top:58%;
  transform:translate(-50%,-50%) rotate(254deg);
}

/* New SVG Consistency icon should follow the same sizing rules as the other icons. */
.owner-wheel-five .owner-step-4 img{
  width:auto !important;
  height:clamp(28px,7vw,42px) !important;
  max-width:48px !important;
  margin:0 0 5px !important;
  object-fit:contain !important;
}

/* Center circle: OWNER MODE™ only. */
.owner-wheel-five .owner-center span{
  display:none !important;
}
.owner-wheel-five .owner-center > div{
  display:grid !important;
  place-items:center !important;
}

/* Ensure five Owner Mode framework cards stay visible and responsive. */
.owner32-pillar-grid{
  grid-template-columns:repeat(5,minmax(0,1fr)) !important;
}
@media(max-width:980px) and (min-width:601px){
  .owner32-pillar-grid{
    grid-template-columns:repeat(6,minmax(0,1fr)) !important;
  }
  .owner32-pillar-grid > article{grid-column:span 2 !important;}
  .owner32-pillar-grid > article:nth-child(4){grid-column:2 / span 2 !important;}
  .owner32-pillar-grid > article:nth-child(5){grid-column:4 / span 2 !important;}
}
@media(max-width:600px){
  .owner32-pillar-grid{
    grid-template-columns:1fr !important;
  }
  .owner32-pillar-grid > article{
    grid-column:auto !important;
    width:100% !important;
  }

  .owner-wheel-five .owner-wheel-step-arrow{
    font-size:17px;
  }
  .owner-wheel-five .owner-wheel-arrow-1{left:69%;top:18%;}
  .owner-wheel-five .owner-wheel-arrow-2{left:80%;top:57%;}
  .owner-wheel-five .owner-wheel-arrow-3{left:50%;top:81%;}
  .owner-wheel-five .owner-wheel-arrow-4{left:20%;top:57%;}
}


/* ==========================================================
   v20261018f — CLEAN LOGO + OWNER MODE 5-BOX FRAMEWORK
   ========================================================== */

/* Remove all previous logo overlay hacks. */
.brand-framework-overlay,
.footer-framework-overlay{display:none !important;}

/* Header logo is a clean two-part component: cropped logo + live framework line. */
.brand-logo-link{
  display:flex !important;
  flex-direction:column !important;
  align-items:stretch !important;
  justify-content:center !important;
  width:285px !important;
  max-width:32vw !important;
  gap:2px !important;
  background:transparent !important;
  line-height:1 !important;
}
.brand-logo-crop{
  display:block !important;
  width:100% !important;
  aspect-ratio:5.04 / 1 !important;
  overflow:hidden !important;
  background:#fff !important;
}
.brand-logo-crop .brand-logo{
  display:block !important;
  width:100% !important;
  max-width:none !important;
  height:auto !important;
  margin:0 !important;
}
.brand-framework-line{
  display:block !important;
  width:100% !important;
  color:#246cf2 !important;
  font-size:6.2px !important;
  font-weight:800 !important;
  letter-spacing:.045em !important;
  line-height:1.2 !important;
  text-align:center !important;
  white-space:nowrap !important;
}
.site-header.is-scrolled .brand-logo-link,
.site-header.is-scrolled .brand-logo-crop{
  background:#fff !important;
}

/* Footer uses the same clean logo treatment at a larger size. */
.footer-logo-panel{
  display:flex !important;
  flex-direction:column !important;
  gap:4px !important;
}
.footer-logo-crop{
  display:block !important;
  width:100% !important;
  aspect-ratio:5.04 / 1 !important;
  overflow:hidden !important;
  background:#fff !important;
}
.footer-logo-crop .footer-logo{
  display:block !important;
  width:100% !important;
  height:auto !important;
  margin:0 !important;
}
.footer-framework-line{
  display:block !important;
  width:100% !important;
  color:#246cf2 !important;
  font-size:7px !important;
  font-weight:800 !important;
  letter-spacing:.055em !important;
  line-height:1.2 !important;
  text-align:center !important;
  white-space:nowrap !important;
}

/* Five Owner Mode cards: Consistency is the fourth card after Control. */
.owner32-pillar-grid{
  display:grid !important;
  grid-template-columns:repeat(5,minmax(0,1fr)) !important;
  gap:14px !important;
}
.owner32-pillar-grid > article{min-width:0 !important;height:100% !important;}

@media(max-width:1180px){
  .brand-logo-link{width:255px !important;max-width:62vw !important;}
  .brand-framework-line{font-size:5.5px !important;letter-spacing:.035em !important;}
}
@media(max-width:980px) and (min-width:601px){
  .owner32-pillar-grid{grid-template-columns:repeat(6,minmax(0,1fr)) !important;}
  .owner32-pillar-grid > article{grid-column:span 2 !important;}
  .owner32-pillar-grid > article:nth-child(4){grid-column:2 / span 2 !important;}
  .owner32-pillar-grid > article:nth-child(5){grid-column:4 / span 2 !important;}
}
@media(max-width:640px){
  .brand-logo-link{width:220px !important;max-width:70vw !important;gap:1px !important;}
  .brand-framework-line{font-size:4.55px !important;letter-spacing:.022em !important;}
  .owner32-pillar-grid{grid-template-columns:1fr !important;gap:12px !important;}
  .owner32-pillar-grid > article{grid-column:auto !important;width:100% !important;}
}
@media(max-width:390px){
  .brand-logo-link{width:205px !important;max-width:68vw !important;}
  .brand-framework-line{font-size:4.15px !important;letter-spacing:.012em !important;}
}


/* ==========================================================
   v20261018g — TRUE LOGO ASSET + FIVE-BOX VISUALS
   ========================================================== */

/* Remove all prior logo crop / overlay mechanisms. */
.brand-logo-crop,
.brand-framework-line,
.brand-framework-overlay,
.footer-logo-crop,
.footer-framework-line,
.footer-framework-overlay{
  display:none !important;
}

.brand-logo-link{
  display:block !important;
  width:285px !important;
  max-width:34vw !important;
  background:transparent !important;
  line-height:0 !important;
}

.brand-logo-link .brand-logo{
  display:block !important;
  width:100% !important;
  height:auto !important;
  max-width:none !important;
  margin:0 !important;
}

.footer-logo-panel{
  display:block !important;
}

.footer-logo-panel .footer-logo{
  display:block !important;
  width:100% !important;
  max-width:430px !important;
  height:auto !important;
  margin:0 !important;
}

/* Testimonials: five actual cards. */
.testimonial-pattern-grid{
  display:grid !important;
  grid-template-columns:repeat(5,minmax(0,1fr)) !important;
  gap:14px !important;
}

.testimonial-pattern-grid .pattern-card{
  min-width:0 !important;
  height:100% !important;
}

.testimonial-pattern-grid .pattern-card img{
  width:auto !important;
  height:42px !important;
  max-width:52px !important;
  object-fit:contain !important;
}

/* Hidden speaking page: five equal stages. */
.speaking18-pillar-list{
  grid-template-columns:repeat(5,minmax(0,1fr)) !important;
}

/* Tablet: 3 + 2 centered */
@media(max-width:980px) and (min-width:601px){
  .brand-logo-link{
    width:255px !important;
    max-width:62vw !important;
  }

  .testimonial-pattern-grid{
    grid-template-columns:repeat(6,minmax(0,1fr)) !important;
  }
  .testimonial-pattern-grid .pattern-card{
    grid-column:span 2 !important;
  }
  .testimonial-pattern-grid .pattern-card:nth-child(4){
    grid-column:2 / span 2 !important;
  }
  .testimonial-pattern-grid .pattern-card:nth-child(5){
    grid-column:4 / span 2 !important;
  }

  .speaking18-pillar-list{
    grid-template-columns:repeat(3,minmax(0,1fr)) !important;
  }
}

/* Mobile: clear single-column visual sequence. */
@media(max-width:600px){
  .brand-logo-link{
    width:220px !important;
    max-width:72vw !important;
  }

  .testimonial-pattern-grid{
    grid-template-columns:1fr !important;
    gap:10px !important;
  }
  .testimonial-pattern-grid .pattern-card{
    grid-column:auto !important;
    width:100% !important;
  }

  .speaking18-pillar-list{
    grid-template-columns:1fr !important;
  }
}

@media(max-width:390px){
  .brand-logo-link{
    width:205px !important;
    max-width:70vw !important;
  }
}