/* United Legal — round 3, module "philosophy" (DESIGN-SPEC §9).
 * Loads after refine.css / template.css (and after identity.css, whose .ul-philosophy rules it overrides).
 * Tokens come from r3-system.css; every var() carries a literal fallback so the module stands alone.
 * The SVG attributes in the markup ARE the final state of the animation: with no JS, no GSAP or
 * prefers-reduced-motion the section renders complete and static. philosophy.js only moves things
 * away from that state and back (transform / opacity / clip-rect attr / stroke-dashoffset).
 */

/* ---- 1. Plate (Tier A, light) ------------------------------------------------------------- */
.sec.sec-philosophy{
  position:relative;
  padding:0 var(--gutter-a,10px);
  margin:var(--stack,10px) 0 0;
  scroll-margin-top:var(--anchor-offset,calc(var(--header-height,117px) + 24px));
}
.sec-philosophy + .sec-how{ padding-top:var(--stack,10px); }   /* adjacent plates meet with the 10 px frame (§3.4) */

.sec-philosophy .sec__inner.phil{
  position:relative; isolation:isolate;
  width:auto; max-width:1420px; margin:0 auto;
  padding:var(--sec-open,96px) 110px;                       /* 1420 − 220 = 1200 content box (Tier C) */
  border-radius:var(--panel-r,33px);
  background:var(--g-wash,linear-gradient(180deg,rgba(12,29,85,.035) 0%,rgba(12,29,85,0) 100%));
  border:var(--hair-light,1px solid rgba(12,29,85,.10));
  box-shadow:var(--rim-light,inset 0 1px 0 rgba(255,255,255,.90));
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,560px); gap:60px; align-items:center;
}
/* layered light on the plate: key light upper-right, fill light lower-left (never animated) */
.sec-philosophy .phil::before{
  content:""; position:absolute; inset:0; z-index:-1; border-radius:inherit; pointer-events:none;
  background:
    radial-gradient(ellipse 48% 58% at 80% 38%,rgba(79,95,147,.11) 0%,rgba(79,95,147,0) 70%),
    radial-gradient(ellipse 42% 50% at 6% 100%,rgba(204,225,246,.26) 0%,rgba(204,225,246,0) 70%);
}

/* ---- 2. Copy column ----------------------------------------------------------------------- */
.sec-philosophy .phil__copy{ position:relative; max-width:580px; min-width:0; color:#0C1D55; }
.sec-philosophy .phil__copy > *{ margin:0; }

.sec-philosophy .phil__copy .eyebrow{
  position:relative; display:block;
  font:600 18px/1 var(--f-primary); letter-spacing:.08em; text-transform:uppercase; color:#254983;
  padding:0 0 10px; margin:0 0 12px;
}
.sec-philosophy .phil__copy .eyebrow::after{          /* 24 px hairline under the eyebrow (§3.5) */
  content:""; position:absolute; inset-inline-start:0; bottom:0; width:24px; height:1px; background:rgba(12,29,85,.18);
}

.sec-philosophy .phil__copy h2{
  font:600 clamp(40px,4.2vw,60px)/1.08 var(--f-primary); color:#0C1D55; letter-spacing:-.005em;
  margin:0; text-wrap:balance; overflow-wrap:anywhere;
}
.sec-philosophy .phil__copy h2 .phil__l1,
.sec-philosophy .phil__copy h2 .phil__l2{ display:block; color:inherit; }
.sec-philosophy .phil__copy h2 .phil__l2{
  color:var(--bp-600,#3A4C80);
  /* dimensional face: a lit top edge and a one-step base in the light token (--bp-400) */
  text-shadow:0 1px 0 rgba(255,255,255,.85),0 2px 0 rgba(79,95,147,.22);
}
.sec-philosophy .phil__copy h2::after{                 /* three yellow dots, as on the practice heading */
  content:"\2022\00a0\2022\00a0\2022"; display:block; color:#F9E900; font-size:22px; line-height:1;
  margin-top:8px; letter-spacing:.02em; text-shadow:none; opacity:var(--phil-dots,1);
}
/* SplitText line masks: pad the clip so descenders are never cut while a line rises */
.sec-philosophy .phil__copy h2 .phil__mask{ padding-bottom:.14em; margin-bottom:-.14em; }

.sec-philosophy .phil__copy .phil__lead{ font:500 20px/1.5 var(--f-text); color:#0C1D55; margin-top:40px; }
.sec-philosophy .phil__copy .phil__body{ font:400 16px/1.65 var(--f-text); color:var(--ink-2,#3B4660); margin-top:18px; }
.sec-philosophy .phil__copy .phil__close{ font:500 16px/1.65 var(--f-text); color:#0C1D55; margin-top:18px; }

.sec-philosophy .phil__copy .btn{                      /* = existing yellow pill, 52 tall */
  display:inline-flex; align-items:center; justify-content:center;
  margin-top:28px; min-height:52px; padding:14px 29px 16px;
  font:600 18px/18px var(--f-primary); text-transform:uppercase; letter-spacing:.01em; white-space:nowrap;
  border-radius:99px; border:2px solid #F9E900; background:#F9E900; color:#0C1D55; text-decoration:none;
}
.sec-philosophy .phil__copy .btn:focus-visible{ outline:3px solid #0072C7; outline-offset:3px; }

/* ---- 3. Stage (the mark as structure) ----------------------------------------------------- */
.sec-philosophy .phil__stage{
  position:relative; width:100%; max-width:560px; aspect-ratio:1 / 1; justify-self:end; direction:ltr;
  isolation:isolate;
}
.sec-philosophy .phil__stage::before{                  /* key light behind the mark (--bp-400, static) */
  content:""; position:absolute; inset:-6%; z-index:-1; pointer-events:none; border-radius:50%;
  background:radial-gradient(circle at 56% 46%,rgba(79,95,147,.16) 0%,rgba(79,95,147,.06) 38%,rgba(79,95,147,0) 66%);
}
.sec-philosophy .phil-art{ display:block; width:100%; height:100%; overflow:visible; }

/* static styles of the SVG layers (ids are prefixed "phil-" to stay unique on the page) */
.phil-art .phil-grid line{ stroke:rgba(12,29,85,.18); stroke-width:.6; vector-effect:non-scaling-stroke; fill:none; }
.phil-art #phil-ground{ stroke:#CCE1F6; stroke-width:.9; stroke-linecap:round; }
.phil-art #phil-outlineA{ fill:none; stroke:#0C1D55; stroke-width:1.2; vector-effect:non-scaling-stroke; stroke-linejoin:round; }
.phil-art #phil-seam{ stroke:#F9E900; stroke-width:1.6; stroke-linecap:round; }
.phil-art #phil-shadow{ fill:rgba(8,19,56,.28); }
.phil-art #phil-slabA,.phil-art #phil-slabB{ fill:#031C51; }      /* the asset's own fill — never recoloured */
.phil-art #phil-plate1{ fill:#3A4C80; }
.phil-art #phil-plate2{ fill:#4F5F93; }

/* will-change only while the 2.5 s timeline runs (philosophy.js toggles .is-animating) */
.phil__stage.is-animating #phil-mark,.phil__stage.is-animating #phil-slabB,
.phil__stage.is-animating #phil-plate1,.phil__stage.is-animating #phil-plate2,
.phil__stage.is-animating .phil-grid line{ will-change:transform; }

/* optional 44 px replay control; hidden until philosophy.js confirms motion is available */
.sec-philosophy .phil__replay{
  position:absolute; inset-inline-end:0; bottom:0; width:44px; height:44px; padding:0;
  display:grid; place-items:center; border-radius:50%; cursor:pointer;
  border:1px solid rgba(12,29,85,.18); background:rgba(255,255,255,.72); color:#0C1D55;
  transition:background .18s ease,border-color .18s ease;
}
.sec-philosophy .phil__replay[hidden]{ display:none; }
.sec-philosophy .phil__replay svg{ width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.sec-philosophy .phil__replay:hover{ background:#fff; border-color:rgba(12,29,85,.4); }
.sec-philosophy .phil__replay:focus-visible{ outline:3px solid #0072C7; outline-offset:3px; }

/* ---- 4. Responsive --------------------------------------------------------------------------- */
@media (max-width:1024px){
  .sec-philosophy .sec__inner.phil{ grid-template-columns:minmax(0,1fr); gap:40px; padding:var(--sec-open,64px) 48px; border-radius:var(--panel-r,24px); justify-items:center; }
  .sec-philosophy .phil__stage{ order:-1; max-width:360px; justify-self:center; }
  .sec-philosophy .phil__copy{ max-width:640px; width:100%; }
}
@media (max-width:767px){
  .sec-philosophy .sec__inner.phil{ padding:var(--sec-open,48px) 16px; gap:32px; border-radius:var(--panel-r,18px); }
  .sec-philosophy .phil__stage{ max-width:240px; }
  .sec-philosophy .phil__replay{ inset-inline-end:-8px; bottom:-8px; }
  .sec-philosophy .phil__copy h2{ font-size:40px; }
  .sec-philosophy .phil__copy .phil__lead{ font-size:18px; margin-top:32px; }
  .sec-philosophy .phil__copy .btn{ display:flex; width:100%; max-width:320px; }
}

/* ---- 5. RTL / Persian ------------------------------------------------------------------------- */
[dir=rtl] .sec-philosophy .phil__copy{ text-align:start; }
[dir=rtl] .sec-philosophy .phil__copy .eyebrow{ letter-spacing:0; }
[dir=rtl] .sec-philosophy .phil__copy .btn{ text-transform:none; letter-spacing:0; font-weight:600; font-size:17px; }
html[lang=fa] .sec-philosophy .phil__copy h2{ font-weight:700; font-size:clamp(32px,3.6vw,46px); line-height:1.45; letter-spacing:0; }
html[lang=fa] .sec-philosophy .phil__copy h2 .phil__mask{ padding-bottom:.2em; margin-bottom:-.2em; }
html[lang=fa] .sec-philosophy .phil__copy .phil__lead{ font-size:19px; line-height:1.9; }
html[lang=fa] .sec-philosophy .phil__copy .phil__body,
html[lang=fa] .sec-philosophy .phil__copy .phil__close{ line-height:1.9; }
@media (max-width:767px){ html[lang=fa] .sec-philosophy .phil__copy h2{ font-size:30px; line-height:1.55; } }

/* ---- 6. Reduced motion, forced colours, print ------------------------------------------------- */
@media (prefers-reduced-motion:reduce){
  .sec-philosophy .phil__replay{ display:none !important; }
  .phil-art #phil-outlineA,.phil-art #phil-seam{ opacity:0; }
  .phil-art #phil-grid{ opacity:.35; }
  .sec-philosophy .phil__copy > *,.sec-philosophy .phil__copy h2 span{ opacity:1 !important; transform:none !important; }
}
@media (forced-colors:active){
  .sec-philosophy .phil::before,.sec-philosophy .phil__stage::before{ display:none; }
  .sec-philosophy .sec__inner.phil{ border:1px solid CanvasText; }
}
@media print{ .sec-philosophy .phil__replay{ display:none; } }