/* Portrait-led finish shared by the home and service pages. */
body{
  background:
    radial-gradient(70vw 52vw at 82% -12%,rgba(119,72,210,.34),transparent 62%),
    radial-gradient(45vw 38vw at -4% 44%,rgba(106,50,151,.15),transparent 72%),
    linear-gradient(180deg,#09050f 0%,#0d0716 48%,#08050d 100%);
}
.site-head{border-color:rgba(207,173,255,.18);background:rgba(9,5,15,.78)}
.brand{letter-spacing:-.35px}.brand b{color:#d3b6ff}
.nav-links .join{background:rgba(180,139,255,.09);box-shadow:inset 0 0 24px rgba(180,139,255,.06)}
.hero,.home-hero{position:relative}
.hero:before,.home-hero:before{content:"";position:absolute;z-index:-1;width:320px;height:320px;border:1px solid rgba(207,173,255,.09);border-radius:50%;left:-210px;top:42px}
.hero h1,.home-hero h1{font-weight:500;letter-spacing:-.045em;text-wrap:balance}
.section{border-color:rgba(207,173,255,.15)}
.section h2{text-wrap:balance}
.page-card,.card,.desk,.guard,.proof-panel,.ops-overview{
  box-shadow:inset 0 1px rgba(255,255,255,.025),0 22px 65px rgba(0,0,0,.15);
}
.page-card,.card{background:linear-gradient(145deg,rgba(31,18,48,.8),rgba(12,7,20,.9))}
.page-card:hover,.card:hover{border-color:rgba(207,173,255,.55);box-shadow:0 22px 65px rgba(24,9,39,.34)}
.button:focus-visible,.page-card:focus-visible,.portrait-swap:focus-visible,.service-menu summary:focus-visible{
  outline:2px solid var(--term);outline-offset:5px;
}

/* Home: keep the person larger than the product chrome. */
#home-hero{grid-template-columns:minmax(0,1fr) minmax(390px,.85fr);gap:clamp(32px,5vw,68px);padding:64px 0 76px}
#home-hero>div:first-child{position:relative;z-index:2}
#home-hero h1{font-size:clamp(47px,6.5vw,82px);max-width:10.8ch}
#home-hero .lead{max-width:54ch}
#home-hero .portrait{min-height:580px;border-radius:180px 180px 28px 28px;border-color:rgba(207,173,255,.46);box-shadow:0 30px 80px rgba(0,0,0,.4),0 0 0 10px rgba(207,173,255,.035)}
#home-hero .portrait.portrait-swap{--swap-image:url("/gallery/full/ophelia-daylight-candid.png")}
/* Load the large alternate only when requested, not behind an invisible layer. */
#home-hero .portrait-swap::after{background-image:none}
#home-hero .portrait-swap:hover::after,
#home-hero .portrait-swap:focus-visible::after,
#home-hero .portrait-swap:active::after{background-image:var(--swap-image)}
#home-hero .portrait:before{content:"OPHELIA / 01";position:absolute;z-index:3;right:20px;top:18px;color:rgba(255,255,255,.64);font:9px/1 var(--mono);letter-spacing:2px}
#home-hero .portrait img{min-height:580px;object-position:center 42%}
#home-hero .portrait-note{left:22px;bottom:21px;background:rgba(9,5,15,.76);backdrop-filter:blur(8px)}
.home-service-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.home-service-grid .page-card{position:relative;min-height:250px;padding:30px;display:flex;flex-direction:column;border-radius:22px;overflow:hidden}
.home-service-grid .page-card h3{position:relative;font-size:clamp(24px,3vw,34px);max-width:15ch;margin-top:28px;line-height:1.15;letter-spacing:-.025em}
.home-service-grid .page-card p{margin-top:auto;padding-top:18px}
.home-service-grid .service-no{position:absolute;right:22px;top:20px;color:rgba(207,173,255,.18);font:500 76px/1 var(--mono);letter-spacing:-6px;pointer-events:none}
#home-take{grid-template-columns:minmax(300px,.72fr) 1fr}
#home-take .persona-photo{min-height:520px;border-radius:110px 24px 24px 24px;border-color:rgba(207,173,255,.27);box-shadow:0 32px 90px rgba(0,0,0,.36)}
#home-take .persona-photo img{min-height:520px;object-position:center 34%}

/* MCA: an actual operator beside an accurate, non-metric desk map. */
.pipeline{padding:0;background:#0b0712;border-color:rgba(207,173,255,.32)}
.pipeline .operator-photo{display:block;width:100%;height:310px;object-fit:cover;object-position:center 30%;filter:saturate(.82) contrast(1.04)}
.pipeline .pipeline-body{position:relative;padding:18px 20px 20px;background:linear-gradient(180deg,rgba(17,9,28,.92),#0b0712)}
.pipeline .pipe-head{margin-bottom:13px}
.workflow-ribbon{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px;margin:0 0 13px;padding:0;list-style:none}
.workflow-ribbon li{position:relative;padding:12px 6px;border:1px solid rgba(180,139,255,.3);border-radius:8px;background:rgba(180,139,255,.09);color:var(--ink);font-size:11px;line-height:1.35;text-align:center;letter-spacing:.2px}
.workflow-ribbon li:not(:last-child):after{content:"›";position:absolute;right:-6px;z-index:2;color:var(--term)}
.pipeline .signal{min-height:70px}.pipeline .desk-alert{margin-bottom:0}

/* One editorial rhythm across service pages; existing copy and controls stay intact. */
.section{padding-top:clamp(40px,6vw,76px);padding-bottom:clamp(40px,6vw,76px)}
.section h2{max-width:24ch;font-size:clamp(28px,3.8vw,46px);line-height:1.13;letter-spacing:-.035em}
.kicker,.eyebrow{color:#d5bcff;letter-spacing:1.8px}
.intro,.lead{line-height:1.75}
.card,.desk,.guard{border-radius:18px}
.card h3{font-size:21px;letter-spacing:-.02em}
.button{min-height:46px;display:inline-flex;align-items:center;justify-content:center;padding:12px 20px;border-radius:10px}
.button.primary{background:#d6beff;color:#1d102c;border-color:#d6beff;font-weight:700}
.button.primary:hover{background:#e4d3ff;color:#1d102c}
.page-card:hover,.page-card:focus-visible{background:linear-gradient(140deg,#302043,#171020)}
.cta{background:linear-gradient(120deg,rgba(113,65,171,.2),rgba(31,18,48,.4));border:1px solid rgba(207,173,255,.24);border-radius:24px;padding:clamp(24px,5vw,56px);margin:36px 0}
.cta h2{max-width:22ch}

@media(max-width:900px){
  #home-hero{grid-template-columns:1fr;gap:34px}
  #home-hero .portrait{width:min(100%,560px);min-height:0}
  #home-hero .portrait img{min-height:0;aspect-ratio:1/1;object-position:center 38%}
  .home-service-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:650px){
  #home-hero{padding-top:42px}
  #home-hero h1{font-size:clamp(43px,14vw,64px)}
  #home-hero .portrait{border-radius:22px 22px 70px 22px}
  .home-service-grid{grid-template-columns:1fr}
  .home-service-grid .page-card{min-height:0}
  #home-take{grid-template-columns:1fr}
  #home-take .persona-photo{min-height:0;max-width:460px}
  #home-take .persona-photo img{min-height:0;aspect-ratio:4/5}
  .workflow-ribbon{grid-template-columns:1fr;gap:5px}
  .workflow-ribbon li{display:flex;align-items:center;text-align:left;padding:8px 10px}
  .workflow-ribbon li:not(:last-child):after{content:"↓";right:10px}
}
@media(prefers-reduced-motion:reduce){
  .page-card,.card,.button{transition:none!important;transform:none!important}
}