/* The Careful Circle — visual storytelling refinement — 19 Aug 2026
   Scope: Circle page only. Preserves inner premium palette and functional architecture. */

/* 1) Premium human hero: same disciplined image/copy integration learned outside,
      rendered in the richer inner Circle visual language. */
.circle-premium-hero{
  position:relative;
  min-height:640px;
  display:flex;
  align-items:center;
  overflow:hidden;
  background:#0c1521 url('/assets/circle-executive-hero-19-aug-2026.webp') 50% 50%/cover no-repeat;
  border-bottom:1px solid rgba(203,168,90,.28);
}
.circle-premium-hero::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(90deg,rgba(12,21,33,.99) 0%,rgba(12,21,33,.96) 30%,rgba(12,21,33,.82) 46%,rgba(12,21,33,.42) 59%,rgba(12,21,33,.08) 75%,rgba(12,21,33,.03) 100%),
    linear-gradient(180deg,rgba(12,21,33,.08),rgba(12,21,33,.18));
  pointer-events:none;
}
.circle-premium-hero .circle-premium-hero-inner{
  width:100%;
  max-width:1080px;
  margin:0 auto;
  padding:96px 26px 92px;
  position:relative;
  z-index:1;
}
.circle-premium-hero .circle-premium-hero-copy{max-width:610px}
.circle-premium-hero .eyebrow{color:#cba85a;margin-bottom:14px}
.circle-premium-hero h1{
  color:#fffaf0;
  font-size:clamp(44px,5.2vw,66px);
  max-width:620px;
  margin:0 0 22px;
}
.circle-premium-hero .lead{color:#f0e4cf;max-width:590px;font-size:clamp(20px,2.2vw,24px)}
.circle-premium-hero .sub{color:#becbd7;max-width:565px;font-size:16.5px}
.circle-premium-hero .hero-actions{margin-top:30px}
.circle-premium-hero .btn.secondary{color:#f2dfa8!important;border-color:#d7b85f!important;background:rgba(203,168,90,.08)!important}
.circle-premium-hero .btn.secondary:hover,.circle-premium-hero .btn.secondary:focus{background:#e6c97e!important;color:#0c1521!important}

/* 2) Recognition becomes a calm editorial chapter instead of competing with the hero. */
.circle-recognition-editorial{
  background:#f7ead7;
  padding:82px 0 76px;
  border-bottom:1px solid rgba(128,99,31,.20);
}
.circle-recognition-grid{
  max-width:1080px;
  margin:0 auto;
  padding:0 26px;
  display:grid;
  grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);
  gap:64px;
  align-items:start;
}
.circle-recognition-heading h2{font-size:clamp(40px,5vw,58px);margin-bottom:0}
.circle-recognition-heading h2 em{color:#80631f}
.circle-recognition-body .lead{font-size:18px;max-width:none;color:#34404b}
.circle-recognition-body .lead:last-of-type{margin-bottom:0}
.circle-recognition-principle{
  max-width:1080px;
  margin:38px auto 0;
  padding:24px 28px;
  border-left:4px solid #cba85a;
  background:#fffaf0;
  box-shadow:0 14px 36px rgba(12,21,33,.07);
  display:grid;
  grid-template-columns:1fr auto 1fr;
  gap:18px;
  align-items:center;
}
.circle-recognition-principle .primary{font-family:'Cormorant Garamond',Georgia,serif;font-size:24px;color:#16273b;margin:0}
.circle-recognition-principle .accent{font-size:13px;font-weight:700;letter-spacing:.6px;text-transform:uppercase;color:#80631f;margin:0;text-align:center}

/* 3) The Circle's signature inner journey: decision -> responsible next move. */
.circle-decision-story .circle-not-this{
  max-width:860px;
  padding:24px 28px;
  margin:0 0 34px;
  border:1px solid rgba(203,168,90,.25);
  border-left:4px solid #cba85a;
  background:rgba(255,255,255,.055);
  border-radius:11px;
}
.circle-decision-story .circle-not-this h3{color:#e6c97e;font-size:26px;margin-bottom:10px}
.circle-decision-story .circle-not-this ul{margin:0;padding-left:20px}
.circle-decision-story .circle-not-this li{margin:7px 0}
.circle-decision-path-wrap{position:relative;margin:42px 0 36px;padding:18px 0 8px;overflow-x:auto;scrollbar-width:thin}
.circle-decision-path{
  position:relative;
  min-width:920px;
  display:grid;
  grid-template-columns:repeat(6,minmax(130px,1fr));
  gap:14px;
  padding:0 2px;
}
.circle-decision-path::before{
  content:"";
  position:absolute;
  left:7.8%;
  right:7.8%;
  top:35px;
  height:1px;
  background:linear-gradient(90deg,rgba(203,168,90,.20),#cba85a 20%,#cba85a 80%,rgba(203,168,90,.20));
}
.circle-decision-step{position:relative;text-align:center;padding:0 10px;z-index:1}
.circle-decision-step .step-num{
  width:70px;height:70px;margin:0 auto 18px;border-radius:50%;
  display:grid;place-items:center;background:#0c1521;color:#e6c97e;
  border:1px solid rgba(230,201,126,.72);box-shadow:0 8px 22px rgba(0,0,0,.22);
  font-family:'Cormorant Garamond',Georgia,serif;font-size:25px;font-weight:700;
}
.circle-decision-step h3{color:#f7ead7;font-size:25px;margin:0 0 9px}
.circle-decision-step p{color:#bdcad6;font-size:14px;line-height:1.55;margin:0}
.circle-decision-story .journey-payoff{
  max-width:860px;margin:34px auto 0;padding:24px 28px;text-align:center;
  border-top:1px solid rgba(203,168,90,.30);border-bottom:1px solid rgba(203,168,90,.30);
  color:#f7ead7;font-family:'Cormorant Garamond',Georgia,serif;font-size:clamp(25px,3vw,34px);
}
.circle-pattern-strip{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:32px}
.circle-pattern-strip article{padding:22px 24px;border:1px solid rgba(203,168,90,.24);border-radius:10px;background:rgba(203,168,90,.08)}
.circle-pattern-strip .pattern-label{text-transform:uppercase;letter-spacing:1.5px;font-size:10px;font-weight:700;color:#cba85a;margin-bottom:7px}
.circle-pattern-strip strong{display:block;color:#f7ead7;font-family:'Cormorant Garamond',Georgia,serif;font-size:24px;line-height:1.25;margin-bottom:6px}
.circle-pattern-strip span{color:#aebdca;font-size:14px}

/* 4) Tangible outcome: a visible, synthetic decision artifact. */
.circle-output-section{
  padding:84px 0;
  background:#fffdf8;
  border-bottom:1px solid rgba(128,99,31,.20);
}
.circle-output-grid{
  max-width:1080px;margin:0 auto;padding:0 26px;
  display:grid;grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr);gap:54px;align-items:center;
}
.circle-output-copy h2{font-size:clamp(40px,4.8vw,56px);margin-bottom:18px}
.circle-output-copy .lead{font-size:19px;color:#394550}
.circle-output-list{list-style:none;padding:0;margin:24px 0 0}
.circle-output-list li{padding:11px 0 11px 28px;border-bottom:1px solid rgba(22,39,59,.10);position:relative;color:#3f4852}
.circle-output-list li::before{content:"✓";position:absolute;left:0;color:#80631f;font-weight:700}
.circle-output-figure{margin:0}
.circle-output-figure img{display:block;width:100%;border-radius:13px;border:1px solid rgba(128,99,31,.25);box-shadow:0 22px 54px rgba(12,21,33,.16)}
.circle-output-figure figcaption{margin-top:12px;color:#66717b;font-size:12.5px;line-height:1.55}
.circle-output-figure figcaption strong{color:#80631f}

@media(max-width:900px){
  .circle-premium-hero{min-height:580px;background-position:63% center}
  .circle-premium-hero::before{background:linear-gradient(90deg,rgba(12,21,33,.98) 0%,rgba(12,21,33,.94) 42%,rgba(12,21,33,.62) 64%,rgba(12,21,33,.18) 86%)}
  .circle-premium-hero .circle-premium-hero-copy{max-width:540px}
  .circle-recognition-grid,.circle-output-grid{grid-template-columns:1fr;gap:32px}
  .circle-recognition-principle{margin-left:22px;margin-right:22px;grid-template-columns:1fr;gap:8px}
  .circle-recognition-principle .accent{text-align:left}
  .circle-pattern-strip{grid-template-columns:1fr}
}
@media(max-width:620px){
  .circle-premium-hero{min-height:auto;background-position:68% center}
  .circle-premium-hero::before{background:linear-gradient(90deg,rgba(12,21,33,.99) 0%,rgba(12,21,33,.96) 58%,rgba(12,21,33,.68) 86%,rgba(12,21,33,.45) 100%)}
  .circle-premium-hero .circle-premium-hero-inner{padding:70px 20px 68px}
  .circle-premium-hero h1{font-size:clamp(39px,12vw,52px)}
  .circle-recognition-editorial,.circle-output-section{padding:60px 0}
  .circle-recognition-grid,.circle-output-grid{padding-left:20px;padding-right:20px}
  .circle-recognition-principle{margin-left:20px;margin-right:20px;padding:21px 22px}
  .circle-decision-path-wrap{margin-left:-4px;margin-right:-4px}
}