/* Personal Home — Full Home V2 (approved 2026-09-24). Source file: copied to patrick-hub-v2/ by build.mjs.
   Chapters 01–03 (flow), 04 (Selected Work), 05–09. Scoped under .ph / body.page-home. */
/* inherited from 03-scroll-flow-study (approved) — do not edit here */

/* =========================================================================
   SCROLL FLOW STUDY — Hero → Builder → Method
   One sticky stage, three layers. JS writes scroll-derived progress vars on
   .phflow; CSS maps them to transform / opacity / blur / mask only.
   Without .is-motion (reduced motion / no JS) the three layers render as
   plain stacked sections: Hero V5-B and Builder-B exactly as approved.
   ========================================================================= */

.ph{
  --bg:#091015;
  --bg-soft:#10191e;
  --ink:#f1f1eb;
  --muted:#a3b0b3;
  --cyan:#83dadd;
  --line:rgba(131,218,221,.18);
}

.ph *,.ph *::before,.ph *::after{box-sizing:border-box}

body.page-home{margin:0;background:#091015;color:#f1f1eb;overflow-x:clip}
.ph{font-family:Arial,Helvetica,sans-serif;color:var(--ink);font-size:16px;line-height:normal}



/* ---------------------------------------------------------------------------
   FLOW SHELL
--------------------------------------------------------------------------- */

.phflow{
  /* static defaults = approved still compositions */
  --hx:0; --hp:0;
  --ch:1; --b1:1; --b2:1; --b3:1; --b4:1; --b5:0; --b5v:1;
  --m:0; --mm:0; --mo:1; --pp:1; --pb:0; --hd:1;
  --mx:0; --my:0;
  position:relative;
}

.layer{position:relative;min-height:100svh;overflow:clip;isolation:isolate}

.phflow.is-motion .track{position:relative;height:calc(100svh * (1 + var(--T,4.6)))}
.phflow.is-motion .stage{position:sticky;top:0;height:100svh;overflow:hidden;isolation:isolate}
.phflow.is-motion .layer{position:absolute;inset:0;min-height:0;pointer-events:none}
.phflow.is-motion .layer a{pointer-events:auto}
.phflow.is-motion .L-hero{z-index:1}
.phflow.is-motion .L-build{z-index:2}
.phflow.is-motion .L-method{z-index:3}

/* =========================================================================
   LAYER 1 — HERO (Hero Authority V5-B, consolidated; visuals unchanged)
   ========================================================================= */

.ph-hero{
  position:relative;
  min-height:100svh;
  overflow:hidden;
  isolation:isolate;
  background:
    radial-gradient(circle at 76% 41%,rgba(76,151,159,.19),transparent 26%),
    radial-gradient(circle at 66% 74%,rgba(32,70,77,.16),transparent 31%),
    linear-gradient(125deg,#080d11 0%,#0c1419 54%,#090f13 100%);
}







.grid{
  position:absolute;z-index:-10;inset:30% -15% -40%;opacity:.11;
  background-image:
    linear-gradient(rgba(131,218,221,.11) 1px,transparent 1px),
    linear-gradient(90deg,rgba(131,218,221,.11) 1px,transparent 1px);
  background-size:64px 64px;
  transform:perspective(800px) rotateX(68deg);transform-origin:center bottom;
  -webkit-mask-image:linear-gradient(to bottom,transparent,#000 25%,#000 70%,transparent);
          mask-image:linear-gradient(to bottom,transparent,#000 25%,#000 70%,transparent);
}

.halo{
  position:absolute;z-index:-8;width:610px;height:610px;right:4.5%;top:13%;
  border-radius:50%;border:1px solid rgba(131,218,221,.09);opacity:.72;
}
.halo::before,.halo::after{content:"";position:absolute;border-radius:50%;border:1px solid rgba(131,218,221,.07)}
.halo::before{inset:12%}
.halo::after{inset:27%}

.core{
  position:absolute;z-index:8;right:10.8%;top:31%;width:5px;height:5px;opacity:.8;
  border-radius:50%;background:var(--cyan);
  box-shadow:0 0 0 7px rgba(131,218,221,.06),0 0 28px rgba(131,218,221,.56);
}

/* scroll wrappers (inset:0) keep pointer parallax and scroll motion separate */
.hx{position:absolute;inset:0;pointer-events:none}
.hx-build{z-index:-3}
.hx-operate{z-index:-3}
.hx-patrick{z-index:6}

.depth-word{
  position:absolute;margin:0;color:transparent;
  -webkit-text-stroke:1px rgba(231,240,238,.105);
  font-weight:700;line-height:.77;letter-spacing:-.075em;white-space:nowrap;
  user-select:none;pointer-events:none;
  transform:translate3d(calc(var(--hmx,0px) * var(--depth)),calc(var(--hmy,0px) * var(--depth)),0);
  transition:transform .16s ease-out;
}
.word-build{left:39%;top:17%;font-size:clamp(130px,17vw,270px);--depth:-.16;opacity:.72}
.word-operate{right:-3%;bottom:5%;font-size:clamp(105px,14vw,220px);--depth:.32;opacity:.62}

.patrick-stage{
  position:absolute;z-index:6;right:5.8%;bottom:-2.5%;
  width:min(40vw,575px);height:78vh;pointer-events:none;
  transform:translate3d(calc(var(--hmx,0px) * -.13),calc(var(--hmy,0px) * -.08),0);
  transition:transform .16s ease-out;
}
.patrick-stage::before{
  content:"";position:absolute;z-index:-1;width:70%;height:64%;left:20%;bottom:7%;
  border-radius:50%;background:rgba(62,142,150,.12);filter:blur(70px);
}
.patrick{
  width:100%;height:100%;object-fit:contain;object-position:center bottom;
  filter:saturate(.82) contrast(1.035) brightness(.91) drop-shadow(0 35px 45px rgba(0,0,0,.38));
}

.vertical{
  position:absolute;z-index:11;right:1.7%;top:33%;opacity:.65;
  writing-mode:vertical-rl;font-size:12px;letter-spacing:.2em;color:#6a8085;text-transform:uppercase;
}

.content{
  position:relative;z-index:20;
  width:min(1320px,calc(100% - 72px));min-height:calc(100svh - 76px);margin:auto;
  display:flex;flex-direction:column;justify-content:center;align-items:flex-start;
  padding:58px 0 94px;
}
.ph-eyebrow{
  display:flex;align-items:center;gap:11px;margin:0 0 24px;
  color:#a9b7ba;font-size:12px;letter-spacing:.18em;text-transform:uppercase;
}
.ph-eyebrow::before{content:"";width:27px;height:1px;background:var(--cyan)}
h1{
  max-width:690px;margin:0;
  font-family:'Bodoni Moda',Georgia,"Times New Roman",serif;font-size:clamp(74px,8vw,120px);
  font-weight:400;line-height:.82;letter-spacing:-.073em;
}
h1 em{color:var(--cyan);font-weight:400}
.thesis{
  max-width:590px;margin:35px 0 0;font-family:'Bodoni Moda',Georgia,"Times New Roman",serif;
  font-size:clamp(27px,2.35vw,37px);line-height:1.12;letter-spacing:-.035em;
}
.lead{max-width:470px;margin:22px 0 0;color:var(--muted);font-size:14px;line-height:1.7}
.cta{
  display:inline-flex;align-items:center;gap:37px;min-height:49px;margin-top:31px;padding:0 20px;
  border:1px solid rgba(131,218,221,.5);background:rgba(11,24,29,.39);backdrop-filter:blur(12px);
  color:var(--ink);text-decoration:none;font-size:12px;
}
.cta b{color:var(--cyan);font-size:18px;font-weight:400}

.thread{
  position:absolute;z-index:20;left:50%;bottom:25px;transform:translateX(-50%);
  width:min(1320px,calc(100% - 64px));display:flex;align-items:center;gap:17px;
  color:#72868a;font-size:12px;letter-spacing:.13em;text-transform:uppercase;
}
.thread span{white-space:nowrap}
.thread i{flex:1;height:1px;margin-left:7px;background:linear-gradient(90deg,rgba(131,218,221,.3),transparent)}

/* Hero — mobile (V4 base + V5-B, consolidated) */
@media(max-width:800px){
  
  
  .content{width:calc(100% - 32px);min-height:100svh;justify-content:flex-start;padding:34px 0 0}
  .ph-eyebrow{margin-bottom:17px;font-size:12px;letter-spacing:.16em}
  .ph-eyebrow::before{width:20px}
  h1{max-width:none;font-size:clamp(54px,14.7vw,66px);line-height:.84;letter-spacing:-.067em}
  .thesis{max-width:345px;margin-top:22px;font-size:23px;line-height:1.08}
  .lead{max-width:340px;margin-top:16px;font-size:12.5px;line-height:1.58}
  .cta{min-height:46px;margin-top:20px;padding-inline:16px;gap:27px;font-size:12px}

  .hx-patrick{z-index:7}
  .hx-build{z-index:1}
  .patrick-stage{width:100%;height:100%;right:0;bottom:0;overflow:visible;transform:none}
  .patrick{
    position:absolute;width:61vw;max-width:none;height:auto;top:380px;right:-1vw;bottom:auto;
    object-fit:initial;object-position:initial;
    filter:saturate(.84) contrast(1.035) brightness(.90) drop-shadow(0 28px 38px rgba(0,0,0,.44));
    -webkit-mask-image:linear-gradient(to bottom,#000 0,#000 76%,transparent 97%);
            mask-image:linear-gradient(to bottom,#000 0,#000 76%,transparent 97%);
  }
  .patrick-stage::before{
    width:66vw;height:420px;left:auto;right:-8vw;top:420px;bottom:auto;
    background:radial-gradient(ellipse,rgba(62,142,150,.15),transparent 67%);filter:blur(50px);
  }
  .word-build{left:-6%;top:530px;bottom:auto;font-size:100px;opacity:.48;-webkit-text-stroke:1px rgba(231,240,238,.09)}
  .word-operate{right:-38%;bottom:-3%;font-size:79px;opacity:.29}
  .halo{width:380px;height:380px;right:-48%;top:360px;bottom:auto;opacity:.40}
  .grid{inset:58% -80% -32%;opacity:.075}
  .core,.vertical,.thread{display:none}
}
@media(max-width:800px) and (max-height:760px){
  .ph-eyebrow{margin-bottom:14px}
  h1{font-size:clamp(50px,14vw,58px)}
  .thesis{margin-top:17px;font-size:21px}
  .lead{margin-top:13px;line-height:1.48}
  .cta{margin-top:17px}
}
@media(max-width:370px){
  h1{font-size:52px}
  .thesis{font-size:21px}
  .lead{font-size:12px}
  .patrick{width:59vw;top:345px;right:0}
  .patrick-stage::before{width:68vw;right:-10vw;top:385px}
  .word-build{top:485px;font-size:89px}
  .word-operate{font-size:70px;right:-40%}
  .halo{top:325px}
}

/* Hero exit — driven by --hx (0..1) and --hp (Patrick exit, 0..1) */
.phflow.is-motion .thread,
.phflow.is-motion .vertical,
.phflow.is-motion .core{opacity:calc(1 - var(--hx) * 2.2)}
.phflow.is-motion .content{
  transform:translate3d(0,calc(var(--hx) * -9vh),0);
  opacity:calc(1 - var(--hx) * 1.7);
}
/* BUILD recedes into depth, OPERATE passes the camera: identity decomposing */
.phflow.is-motion .hx-build{
  transform-origin:62% 24%;
  transform:translate3d(calc(var(--hx) * -7vw),calc(var(--hx) * -9vh),0) scale(calc(1 - var(--hx) * .3));
  opacity:calc(1 - var(--hx) * 1.15);
}
.phflow.is-motion .hx-operate{
  transform-origin:82% 86%;
  transform:translate3d(calc(var(--hx) * 9vw),calc(var(--hx) * 7vh),0) scale(calc(1 + var(--hx) * .55));
  opacity:calc(1 - var(--hx) * 1.25);
}
/* the Authority portrait steps back through a soft plane — never a hard cut */
.phflow.is-motion .hx-patrick{
  transform-origin:80% 72%;
  transform:translate3d(calc(var(--hp) * 5vw),calc(var(--hp) * 4vh),0) scale(calc(1 - var(--hp) * .1));
  opacity:calc(1 - var(--hp));
  filter:blur(calc(var(--hp) * 9px));
}
.phflow.is-motion .halo{transform:scale(calc(1 + var(--hx) * .7));opacity:calc(.72 - var(--hx) * .72)}
.phflow.is-motion .grid{opacity:calc(.11 - var(--hx) * .11)}

@media(max-width:800px){
  .phflow.is-motion .hx-patrick{transform-origin:80% 80%}
  .phflow.is-motion .halo{opacity:calc(.40 - var(--hx) * .40)}
  .phflow.is-motion .grid{opacity:calc(.075 - var(--hx) * .075)}
}

/* =========================================================================
   LAYER 2 — BUILDER (Builder-B base)
   ========================================================================= */

.L-build{
  background:
    radial-gradient(ellipse at 38% 46%,rgba(62,142,150,.15),transparent 40%),
    linear-gradient(180deg,#0b1317 0%,#091015 100%);
}
.phflow.is-motion .L-build{background:none}
.phflow.is-motion .L-build::before{
  content:"";position:absolute;inset:0;z-index:-1;opacity:var(--ch);
  background:
    radial-gradient(ellipse at 38% 46%,rgba(62,142,150,calc(.09 + var(--b3) * .06)),transparent 40%),
    linear-gradient(180deg,#0b1317 0%,#091015 100%);
}

.b-eyebrow{display:flex;align-items:center;gap:14px;margin:0;font-size:12px;letter-spacing:.24em;text-transform:uppercase;color:#9fb3b4}
.b-eyebrow::before{content:"";width:34px;height:1px;background:var(--cyan)}
.b-eyebrow b{font-weight:400;color:var(--cyan)}
.b-title{margin:22px 0 0;font-family:'Bodoni Moda',Georgia,"Times New Roman",serif;font-weight:400;font-size:clamp(38px,3.5vw,54px);line-height:1;letter-spacing:-.035em}
.dot{color:var(--cyan)}
.b-support{margin:24px 0 0;max-width:420px;color:var(--muted);font-size:15.5px;line-height:1.62}
.idx{font-family:Arial,Helvetica,sans-serif;font-size:12px;letter-spacing:.22em;color:var(--cyan)}

.b-copy{position:absolute;z-index:30;right:max(5vw,40px);top:18vh;width:min(380px,27vw)}

.steps{display:flex;gap:18px;margin:34px 0 0;padding:16px 0 0;border-top:1px solid rgba(255,255,255,.12);
  list-style:none;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:#7f9293}
.steps li{transition:color .5s ease}
.phflow:not(.is-motion) .steps li:nth-child(4),
.phflow[data-phase="1"] .steps li:nth-child(1),
.phflow[data-phase="2"] .steps li:nth-child(2),
.phflow[data-phase="3"] .steps li:nth-child(3),
.phflow[data-phase="4"] .steps li:nth-child(4),
.phflow[data-phase="5"] .steps li:nth-child(5){color:var(--ink)}

.b-zoom{position:absolute;inset:0;transform-origin:42% 50%}
.b-plane{position:absolute;inset:0;pointer-events:none;
  transform:translate3d(calc(var(--mx) * var(--d,0) * 1px),calc(var(--my) * var(--d,0) * .6px),0)}
.b-back{--d:-12}
.b-mid{--d:4}
.b-front{--d:16}

/* Patrick (builder) */
.b-fb{position:absolute;aspect-ratio:1400/1929;height:94vh;top:5vh;left:25vw}
.b-fig{position:absolute;inset:0;width:100%;height:100%;display:block;
  filter:saturate(.86) contrast(1.04) brightness(.93);
  -webkit-mask-image:linear-gradient(to bottom,#000 0,#000 var(--fade-a,62%),transparent var(--fade-b,76%));
          mask-image:linear-gradient(to bottom,#000 0,#000 var(--fade-a,62%),transparent var(--fade-b,76%))}
.b-rim{position:absolute;left:-30%;top:-8%;width:120%;height:72%;
  background:radial-gradient(ellipse at 42% 44%,rgba(83,165,172,.22),transparent 62%);filter:blur(34px)}
.b-contact{position:absolute;left:-8%;width:80%;top:58%;height:14%;
  background:radial-gradient(ellipse at center,rgba(0,0,0,.5),transparent 70%);filter:blur(18px)}

/* Typographic architecture */
.mw{position:absolute;transform-origin:0 0}
.word{position:relative;margin:0;font-family:'Bodoni Moda',Georgia,"Times New Roman",serif;font-weight:400;
  font-size:16.5vw;line-height:.8;letter-spacing:-.055em;white-space:nowrap}
.word sup{position:absolute;top:-14px;left:.08em;font-family:Arial,Helvetica,sans-serif;font-size:12px;letter-spacing:.22em;color:var(--cyan)}
.mw-problema{top:4vh;left:3vw}
.mw-processo{top:36vh;left:9vw}
.mw-sistema{top:70vh;left:3vw}
.mw-solucao{top:31vh;left:54vw}
.mw-escala{top:77vh;right:5vw}

.w1{color:transparent;-webkit-text-stroke:1px rgba(241,241,235,.2)}
.w1 .ch{display:inline-block}
.w2{color:transparent;-webkit-text-stroke:1px rgba(241,241,235,.22);
  background:linear-gradient(90deg,rgba(241,241,235,.16) 0 calc(var(--b3) * 52%),transparent calc(var(--b3) * 52%));
  -webkit-background-clip:text;background-clip:text}
.w3{font-size:17.5vw;color:rgba(236,238,231,.94)}
.w3 .dot{display:inline-block;transform-origin:50% 80%}
.inter{position:relative;margin:0;font-family:'Bodoni Moda',Georgia,"Times New Roman",serif;font-style:italic;
  font-size:clamp(17px,1.5vw,22px);color:rgba(241,241,235,.7);white-space:nowrap}
.inter .idx{font-style:normal;margin-right:10px}
.i5{color:var(--ink)}
.i5::before{content:"";display:inline-block;width:calc(46px + var(--b5) * 16vw);height:1px;background:var(--cyan);vertical-align:middle;margin-right:14px}

.b-rules,.b-links{display:none}

/* Builder — static mobile (Builder-B mobile, exact) */
@media(max-width:800px){
  .phflow:not(.is-motion) .L-build{display:grid;grid-template-areas:"head" "stage" "body";align-content:start;padding:30px 0 48px}
  .phflow:not(.is-motion) .b-copy{display:contents}
  .phflow:not(.is-motion) .b-head{grid-area:head;padding:0 20px;position:relative;z-index:30}
  .phflow:not(.is-motion) .b-body{grid-area:body;padding:0 20px;position:relative;z-index:30}
  .phflow:not(.is-motion) .b-stage{grid-area:stage;position:relative;height:128vw}
  .b-title{font-size:clamp(35px,10.4vw,44px);margin-top:18px}
  .b-support{font-size:15px;margin-top:6px}
  .b-fb{height:auto;width:76vw;left:13vw;top:2vw}
  .b-fig{--fade-a:60%;--fade-b:78%}
  .word{font-size:24vw}
  .word sup{top:-10px;font-size:12px}
  .mw-problema{top:4vw;left:-2vw}
  .mw-processo{top:44vw;left:6vw}
  .mw-sistema{top:94vw;left:-1vw}
  .w3{font-size:26vw}
  .inter{font-size:14px}
  .mw-solucao{top:38vw;left:auto;right:4vw}
  .mw-escala{top:auto;bottom:-2vw;right:4vw}
  .i5::before{width:calc(24px + var(--b5) * 20vw);margin-right:8px}
  .steps{gap:10px;flex-wrap:wrap;font-size:12px;margin-top:22px}
}
.b-stage{position:absolute;inset:0}

/* Builder — scroll choreography */
.phflow.is-motion .b-copy{opacity:calc(1 - var(--m) * 1.8)}
.phflow.is-motion .b-head{opacity:var(--hd);transform:translate3d(0,calc((1 - var(--hd)) * 4vh + var(--m) * -4vh),0)}
.phflow.is-motion .steps{opacity:var(--hd)}
.phflow.is-motion .b-support{opacity:var(--b3);transform:translate3d(0,calc((1 - var(--b3)) * 2vh),0)}

.phflow.is-motion .b-zoom{transform:scale(calc(1 - var(--b5) * .06 * (1 - var(--m))))}
.phflow.is-motion .b-plane{transform:translate3d(calc(var(--mx) * var(--d,0) * (1 - var(--m)) * 1px),calc(var(--my) * var(--d,0) * (1 - var(--m)) * .6px),0)}

.phflow.is-motion .b-fb{
  will-change:transform,opacity,filter;
  opacity:calc(var(--pp) * (1 - var(--m)));
  filter:blur(calc(var(--pb) * 1px + var(--m) * 4px)) saturate(calc(1 - var(--m) * .7));
  transform:translate3d(calc(var(--b5) * -2vw),calc((1 - var(--pp)) * 4vh),0)
            scale(calc(.95 + var(--pp) * .05 - var(--b5) * .05));
  transform-origin:50% 40%;
}
.phflow.is-motion .b-rim{opacity:calc(var(--pp) * (.55 + var(--b3) * .45))}

/* 1 · Problema — fragmented outline, letters settle when the solution appears */
.phflow.is-motion .w1{opacity:var(--b1);filter:blur(calc((1 - var(--b1)) * 7px));transform-origin:0 0;
  transform:translate3d(calc((1 - var(--b2)) * 2vw),calc((1 - var(--b2)) * var(--p-drop,30vh)),0) scale(calc(.9 + var(--b2) * .1))}
.phflow.is-motion .w1 .ch{transform:translate3d(calc(var(--ox) * (1 - var(--b2)) * 1.1vw),calc(var(--o) * (1 - var(--b2)) * 3.2vh),0)}
/* 2 · Solução — first connection */
.phflow.is-motion .i2{opacity:var(--b2);transform:translate3d(calc((1 - var(--b2)) * -2vw),0,0)}
/* 3 · Processo — fills progressively; structure repeats behind it */
.phflow.is-motion .w2{opacity:min(1,calc(var(--b3) * 2.2));transform:translate3d(0,calc((1 - var(--b3)) * 4vh),0)}
/* 4 · Sistema — rises in front of Patrick */
.phflow.is-motion .w3{opacity:var(--b4);transform:translate3d(0,calc((1 - var(--b4)) * 15vh),0)}
.phflow.is-motion .w3 .dot{transform:scale(clamp(0,calc(var(--b4) * 3 - 2),1))}
/* 5 · Escala — composition opens */
.phflow.is-motion .i5{opacity:var(--b5v)}

.phflow.is-motion .b-rules{display:block;position:absolute;left:6vw;right:38vw;top:37vh;height:32vh}
.b-rules i{position:absolute;left:0;right:0;height:1px;transform-origin:0 50%;
  background:linear-gradient(90deg,rgba(131,218,221,.22),rgba(131,218,221,.04));
  transform:scaleX(clamp(0,calc(var(--b3) * 1.8 - var(--k) * .22),1));
  opacity:calc(1 - var(--b4) * .55)}
.b-rules i:nth-child(1){top:0;--k:0}
.b-rules i:nth-child(2){top:33%;--k:1}
.b-rules i:nth-child(3){top:66%;--k:2}
.b-rules i:nth-child(4){top:99%;--k:3}

.phflow.is-motion .b-links{display:block;position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.b-links path{fill:none;stroke:rgba(131,218,221,.42);stroke-width:1;vector-effect:non-scaling-stroke}
.b-links .l1{stroke-dasharray:1;stroke-dashoffset:calc(1 - var(--b2))}
.b-links .l2{stroke-dasharray:1;stroke-dashoffset:calc(1 - var(--b3))}
.b-links .l3{stroke-dasharray:1;stroke-dashoffset:calc(1 - var(--b4))}
.b-links{opacity:calc(1 - var(--m) * 2)}

/* morph toward Method: JS writes --dx/--dy/--s per word */
.phflow.is-motion .mw{
  transform:translate3d(calc(var(--dx,0px) * var(--mm)),calc(var(--dy,0px) * var(--mm)),0) scale(calc(1 + (var(--s,1) - 1) * var(--mm)));
  opacity:var(--mo);
}
.phflow.is-motion .w1{-webkit-text-stroke-color:rgba(241,241,235,calc(.2 + (1 - var(--b2)) * .24 + var(--mm) * .5))}
.phflow.is-motion .w2{-webkit-text-stroke-color:rgba(241,241,235,calc(.2 + var(--mm) * .5))}

/* Builder — mobile motion composition (fits one 100svh viewport) */
@media(max-width:800px){
  .phflow.is-motion .b-copy{position:absolute;inset:0;width:auto;display:block}
  .phflow.is-motion .b-head{position:absolute;left:20px;right:20px;top:26px}
  .phflow.is-motion .b-body{position:absolute;left:20px;right:20px;bottom:22px}
  .phflow.is-motion .b-title{font-size:clamp(30px,8.6vw,40px)}
  .phflow.is-motion .b-support{font-size:14px;line-height:1.55;margin:0}
  .phflow.is-motion .steps{display:none}
  .phflow.is-motion .b-fb{width:auto;height:calc(100svh - 300px);max-height:118vw;top:188px;left:50%;margin-left:calc((100svh - 300px) * -.3629)}
  .phflow.is-motion .mw-problema{top:196px;left:-2vw}
  .phflow.is-motion .mw-processo{top:calc(196px + 34vw);left:6vw}
  .phflow.is-motion .mw-solucao{top:calc(196px + 27vw);right:4vw}
  .phflow.is-motion .mw-sistema{top:auto;bottom:calc(128px + 1vw);left:-1vw}
  .phflow.is-motion .mw-escala{top:auto;bottom:112px;right:4vw}
  .phflow.is-motion .b-rules{left:4vw;right:10vw;top:calc(196px + 36vw);height:26vw}
  .phflow.is-motion .w3{transform:translate3d(0,calc((1 - var(--b4)) * 10vh),0)}
  .phflow.is-motion .b-support{opacity:calc(var(--b3) * (1 - var(--b4)))}
  .phflow.is-motion .b-plane{transform:none}
  .phflow.is-motion .w1{--p-drop:38vw}
}
@media(max-width:800px) and (max-height:760px){
  .phflow.is-motion .b-title{font-size:clamp(28px,8vw,34px)}
  .phflow.is-motion .b-fb{top:168px}
  .phflow.is-motion .mw-problema{top:176px}
  .phflow.is-motion .mw-processo{top:calc(176px + 34vw)}
  .phflow.is-motion .mw-solucao{top:calc(176px + 27vw)}
}

/* =========================================================================
   LAYER 3 — METHOD / COMO EU PENSO
   ========================================================================= */

.L-method{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);align-items:center;
  gap:4vw;padding:10vh 6vw}
.phflow:not(.is-motion) .L-method{--m:1;--me:1;--mi:1;--ms:1;--mq:1;border-top:1px solid rgba(255,255,255,.06)}
.phflow.is-motion .L-method{background:none}

.m-list-wrap{position:relative;padding-left:3.2vw}
.m-eyebrow{display:flex;align-items:center;gap:14px;margin:0 0 5vh;font-size:12px;letter-spacing:.24em;text-transform:uppercase;color:#9fb3b4;
  opacity:var(--me);transform:translate3d(0,calc((1 - var(--me)) * 2vh),0)}
.m-eyebrow::before{content:"";width:34px;height:1px;background:var(--cyan)}
.m-eyebrow b{font-weight:400;color:var(--cyan)}
.m-spine{position:absolute;left:0;top:calc(11px + 5vh + 8px);bottom:.6vw;width:1px;background:linear-gradient(to bottom,var(--cyan),rgba(131,218,221,.08));
  transform-origin:50% 0;transform:scaleY(var(--ms))}
.m-list{list-style:none;margin:0;padding:0}
.m-list li{position:relative;display:flex;align-items:baseline;gap:1.4vw;
  opacity:clamp(0,calc(var(--mi) * 1.5 - var(--i) * .12),1);
  transform:translate3d(0,calc((1 - clamp(0,calc(var(--mi) * 1.5 - var(--i) * .12),1)) * 1.6vh),0)}
.m-list .idx{width:2.2em;flex:none;align-self:center;transform:translateY(.2em)}
.m-w{font-family:'Bodoni Moda',Georgia,"Times New Roman",serif;font-weight:400;font-size:clamp(44px,6.1vw,98px);line-height:.98;letter-spacing:-.055em;white-space:nowrap}

.m-text{max-width:520px;opacity:var(--mq);transform:translate3d(0,calc((1 - var(--mq)) * 3vh),0)}
.m-quote{margin:0;font-family:'Bodoni Moda',Georgia,"Times New Roman",serif;font-size:clamp(26px,2.4vw,38px);line-height:1.14;letter-spacing:-.03em}
.m-quote .dot{color:var(--cyan)}
.m-sign{display:flex;align-items:center;gap:14px;margin:4vh 0 0;color:var(--muted);font-size:15px;line-height:1.6}
.m-sign::before{content:"";flex:none;width:46px;height:1px;background:var(--cyan)}

@media(max-width:800px){
  .L-method{display:flex;flex-direction:column;align-items:stretch;justify-content:center;gap:5svh;padding:56px 20px}
  .m-list-wrap{padding-left:22px}
  .m-eyebrow{margin-bottom:24px}
  .m-spine{top:43px}
  .m-list li{gap:12px}
  .m-list .idx{width:26px;font-size:12px}
  .m-w{font-size:clamp(40px,12.6vw,64px)}
  .m-quote{font-size:clamp(21px,5.9vw,28px)}
  .m-sign{font-size:14px;margin-top:22px}
  .m-sign::before{width:24px}
}
@media(max-width:800px) and (max-height:760px){
  .m-w{font-size:clamp(38px,11.4vw,56px)}
  .L-method{gap:4svh}
}

/* =========================================================================
   END MARKER (study only)
   ========================================================================= */
.end{min-height:44svh;display:grid;place-items:center;padding:48px 20px;border-top:1px solid rgba(255,255,255,.06);
  color:#6f8386;font-size:12px;letter-spacing:.18em;text-transform:uppercase;text-align:center;line-height:2}
.end b{color:var(--cyan);font-weight:400}

@media(prefers-reduced-motion:reduce){
  .ph *,.ph *::before,.ph *::after{animation:none!important;transition:none!important}
  .patrick-stage,.depth-word,.b-plane{transform:none!important}
}

/* inherited from 06-selected-work-approved/shared (approved); .eyebrow → .eb */
/* Selected Work study — shared base (same universe as the approved flow) */
.ph{
  --bg:#091015; --bg2:#0c1519; --ink:#f1f1eb; --muted:#a3b0b3; --dim:#6f8386; --cyan:#83dadd;
  --rule:rgba(255,255,255,.1); --serif:'Bodoni Moda',Georgia,"Times New Roman",serif; --sans:Arial,Helvetica,sans-serif;
}



.ph img{display:block}
.dot{color:var(--cyan)}
.idx{font-family:var(--sans);font-size:12px;letter-spacing:.22em;color:var(--cyan)}
.eb{display:flex;align-items:center;gap:14px;margin:0;font-size:12px;letter-spacing:.24em;text-transform:uppercase;color:#9fb3b4}
.eb::before{content:"";width:34px;height:1px;background:var(--cyan)}
.eb b{font-weight:400;color:var(--cyan)}

/* --------------------------------------------------------------------------
   Scrub tracks: JS writes --p (0..1). Without .motion, tracks are static and
   show their final state.
-------------------------------------------------------------------------- */
[data-track]{position:relative;--p:1}
.motion [data-track]{height:calc(100svh * var(--len,2.2))}
.motion [data-track] > .pin{position:sticky;top:0;height:100svh;overflow:hidden}
[data-track] > .pin{position:relative;min-height:100svh;overflow:hidden}
.motion [data-track].is-static{height:auto}
.motion [data-track].is-static > .pin{position:relative;height:auto;min-height:100svh}

/* ramp helper: r(a,b) = clamp(0,(p-a)/(b-a),1) is written inline per rule */

/* --------------------------------------------------------------------------
   Evidence crop: shows a rectangle (x,y,w,h in source px) of a real capture.
   The source file is untouched; the crop only hides CTAs/contacts.
-------------------------------------------------------------------------- */
.shot{margin:0;position:relative;background:#0f191d;border:1px solid rgba(255,255,255,.12);
  box-shadow:0 40px 80px rgba(0,0,0,.45)}
.shot .bar{display:flex;align-items:center;gap:6px;height:26px;padding:0 12px;background:#1a2428;border-bottom:1px solid rgba(255,255,255,.06)}
.shot .bar i{width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.18)}
.shot .bar span{margin-left:10px;font-size:12px;letter-spacing:.06em;color:#8fa1a4}
.crop{position:relative;aspect-ratio:var(--w) / var(--h);overflow:hidden;background:#fff}
.crop img{position:absolute;max-width:none;width:calc(var(--iw) / var(--w) * 100%);
  left:calc(var(--x) / var(--w) * -100%);top:calc(var(--y) / var(--h) * -100%)}
.prov{margin:10px 0 0;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim)}
.prov b{font-weight:400;color:#9fb3b4}
.missing{display:grid;place-items:center;aspect-ratio:16/10;border:1px dashed rgba(131,218,221,.35);
  color:#8fa1a4;font-size:12px;letter-spacing:.18em;text-transform:uppercase;text-align:center;padding:20px;background:rgba(131,218,221,.03)}

/* --------------------------------------------------------------------------
   METHOD → WORK transition (shared by all variants)
-------------------------------------------------------------------------- */
.t-method{--len:2.4}
.t-method .pin{background:
  radial-gradient(ellipse at 30% 50%,rgba(62,142,150,.10),transparent 45%),linear-gradient(180deg,#0b1317,#091015)}
.tm-method{position:absolute;inset:0;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);align-items:center;gap:4vw;padding:10vh 6vw}
.tm-list-wrap{position:relative;padding-left:3.2vw}
.tm-eyebrow{margin:0 0 5vh;opacity:calc(1 - clamp(0,(var(--p) - .05) / .2,1))}
.tm-spine{position:absolute;left:0;top:calc(11px + 5vh + 8px);bottom:.6vw;width:1px;background:linear-gradient(to bottom,var(--cyan),rgba(131,218,221,.08));
  transform-origin:50% 100%;transform:scaleY(calc(1 - clamp(0,(var(--p) - .1) / .35,1)))}
.tm-list{list-style:none;margin:0;padding:0}
.tm-list li{display:flex;align-items:baseline;gap:1.4vw;
  --out:clamp(0,(var(--p) - .1 - var(--i) * .06) / .22,1);
  opacity:calc(1 - var(--out));transform:translate3d(calc(var(--out) * -5vw),0,0);filter:blur(calc(var(--out) * 4px))}
.tm-list .idx{width:2.2em;flex:none;align-self:center;transform:translateY(.2em)}
.tm-w{font-family:var(--serif);font-size:clamp(44px,6.1vw,98px);line-height:.98;letter-spacing:-.055em;white-space:nowrap}
/* Escala stays last: it rises, grows into an outline and becomes the chapter's backdrop */
.tm-list li.keep{--out:0;
  --k:clamp(0,(var(--p) - .38) / .3,1);
  transform-origin:0 100%;
  transform:translate3d(calc(var(--k) * -3.2vw),calc(var(--k) * -40vh),0) scale(calc(1 + var(--k) * 1.35))}
.tm-list li.keep .tm-w{color:rgba(241,241,235,calc(1 - var(--k) * .96));-webkit-text-stroke:1px rgba(241,241,235,calc(var(--k) * .16))}
.tm-list li.keep .idx,.tm-list li.keep .dot{opacity:calc(1 - var(--k))}
.tm-text{max-width:520px;opacity:calc(1 - clamp(0,var(--p) / .15,1))}
.tm-quote{margin:0;font-family:var(--serif);font-size:clamp(26px,2.4vw,38px);line-height:1.14;letter-spacing:-.03em}
.tm-sign{display:flex;align-items:center;gap:14px;margin:4vh 0 0;color:var(--muted);font-size:15px;line-height:1.6}
.tm-sign::before{content:"";flex:none;width:46px;height:1px;background:var(--cyan)}

/* the chapter opening (end state of the transition) */
.tm-intro{position:absolute;inset:0;display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);align-items:end;align-content:end;row-gap:3.2vh;gap:5vw;padding:0 6vw 14vh;isolation:isolate}
.tm-intro::before{content:"";position:absolute;left:0;right:0;bottom:0;height:64%;z-index:-1;background:linear-gradient(180deg,transparent,rgba(5,9,16,.68) 58%);pointer-events:none}
.tm-intro > *{--in:clamp(0,(var(--p) - var(--at)) / .18,1);opacity:var(--in);transform:translate3d(0,calc((1 - var(--in)) * 3vh),0)}
.tm-intro .eb{--at:.6;grid-column:1 / -1;align-self:end}
.tm-intro h2{--at:.66;margin:0;font-family:var(--serif);font-weight:400;font-size:clamp(46px,5.4vw,88px);line-height:.98;letter-spacing:-.045em;text-shadow:0 2px 18px rgba(0,0,0,.45)}
.tm-intro .sup{--at:.74;margin:0 0 .6em;max-width:380px;color:#c6d2d3;font-size:16px;line-height:1.62}
.tm-intro .sup::before{content:"";display:block;width:46px;height:1px;background:var(--cyan);margin-bottom:18px}
.tm-bridge{position:absolute;left:6vw;top:9vh;font-size:12px;letter-spacing:.22em;text-transform:uppercase;color:var(--dim);
  --in:clamp(0,(var(--p) - .45) / .15,1);opacity:calc(var(--in) * (1 - clamp(0,(var(--p) - .75) / .15,1)))}
.tm-bridge b{font-weight:400;color:var(--cyan)}

@media(max-width:800px){
  .t-method{--len:1.9}
  .tm-method{display:flex;flex-direction:column;justify-content:center;align-items:stretch;gap:5svh;padding:56px 20px}
  .tm-list-wrap{padding-left:22px}
  .tm-eyebrow{margin-bottom:24px}
  .tm-spine{top:43px}
  .tm-list li{gap:12px}
  .tm-list .idx{width:26px;font-size:12px}
  .tm-w{font-size:clamp(40px,12.6vw,64px)}
  .tm-list li.keep{transform:translate3d(calc(var(--k) * -24px),calc(var(--k) * -30svh),0) scale(calc(1 + var(--k) * .9))}
  .tm-quote{font-size:clamp(21px,5.9vw,28px)}
  .tm-sign{font-size:14px;margin-top:22px}
  .tm-sign::before{width:24px}
  .tm-intro{display:flex;flex-direction:column;justify-content:flex-end;gap:22px;padding:0 20px 11svh}
  .tm-intro .eb{margin:0}
  .tm-intro h2{font-size:clamp(40px,11.4vw,54px)}
  .tm-intro .sup{font-size:15px;margin:0}
  .tm-bridge{left:20px;top:7svh}
}

@media(prefers-reduced-motion:reduce){
  .ph *,.ph *::before,.ph *::after{transition:none!important;animation:none!important}
}

/* inherited from 06-selected-work-approved (approved); .eyebrow → .eb */

/* =====================================================================
   SELECTED WORK — APPROVED: C (Index) structure + A (Casebook) cases.
   Exactly four cases. Companies are evidence of Patrick's work.
   ===================================================================== */
.runhead{position:absolute;left:6vw;top:5vh;z-index:9;margin:0;font-size:12px;letter-spacing:.22em;text-transform:uppercase;color:var(--dim)}
.runhead b{font-weight:400;color:#9fb3b4}

.wk{--len:7.5;--ix:1;--r:1;--foot:0;--c0:1;--c1:1;--c2:1;--c3:1;--v0:1;--v1:1;--v2:1;--v3:1}
.wk .pin{background:linear-gradient(180deg,#0b1317,#091015)}

/* ---------- INDEX ---------- */
.wk-index{position:absolute;left:6vw;right:6vw;top:15vh;z-index:4;
  opacity:var(--ix);transform:translate3d(0,calc((1 - var(--ix)) * -4vh),0)}
.wk-index > .eb{margin:0 0 3vh}
.ix-row{display:grid;grid-template-columns:70px minmax(0,1fr) auto;align-items:baseline;gap:2vw;padding:2.1vh 0;border-top:1px solid var(--rule);
  color:inherit;text-decoration:none}
.ix-row:last-child{border-bottom:1px solid var(--rule)}
.ix-row .idx{align-self:center}
.ix-name{margin:0;font-family:var(--serif);font-weight:400;font-size:6vw;line-height:1;letter-spacing:-.05em;white-space:nowrap;
  color:transparent;-webkit-text-stroke:1px rgba(241,241,235,.34)}
.ix-cat{font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--dim);text-align:right}
/* active line: 01 fills first */
.ix-row.on .ix-name{color:rgba(241,241,235,calc(.2 + var(--r) * .76));-webkit-text-stroke-color:rgba(241,241,235,calc(.34 - var(--r) * .34))}
.ix-row.on .ix-cat{color:#9fb3b4}
.ix-row:not(.on){opacity:calc(1 - var(--r) * .45)}

/* ---------- CASES (Casebook language) ---------- */
.case{position:absolute;inset:0;z-index:5;display:grid;grid-template-columns:minmax(0,.78fr) minmax(0,1.22fr);gap:4.5vw;
  padding:12vh 6vw 14vh;align-items:center;pointer-events:none;
  opacity:var(--o);transform:translate3d(0,calc((1 - var(--o)) * 3vh),0)}
.case a{pointer-events:auto}
.case[data-k="0"]{--o:var(--c0);--v:var(--v0)}
.case[data-k="1"]{--o:var(--c1);--v:var(--v1)}
.case[data-k="2"]{--o:var(--c2);--v:var(--v2)}
.case[data-k="3"]{--o:var(--c3);--v:var(--v3)}

.c-num{margin:0 0 -2.6vw -.3vw;font-family:var(--serif);font-size:9vw;line-height:.8;letter-spacing:-.06em;color:transparent;-webkit-text-stroke:1px rgba(241,241,235,.14)}
.c-kicker{margin:0 0 1.6vh}
.c-name{margin:0;font-family:var(--serif);font-weight:400;font-size:clamp(34px,3.5vw,58px);line-height:.98;letter-spacing:-.045em}
.c-cat{margin:1.6vh 0 0;font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:#9fb3b4}
.c-ctx{margin:2.6vh 0 0;max-width:420px;color:var(--muted);font-size:clamp(13.5px,1.7vh,15.5px);line-height:1.58}
.c-role{margin:3vh 0 0;max-width:420px}
.c-role h4{margin:0 0 .9vh;font-size:12px;font-weight:400;letter-spacing:.24em;text-transform:uppercase;color:var(--cyan)}
.c-role ul{list-style:none;margin:0;padding:0;border-top:1px solid var(--rule)}
.c-role li{display:flex;justify-content:space-between;gap:16px;padding:.95vh 0;border-bottom:1px solid var(--rule);
  font-family:var(--serif);font-size:clamp(15px,2vh,19px);letter-spacing:-.01em}
.c-role li small{font-family:var(--sans);font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--dim);align-self:center}
.c-author{margin:2.4vh 0 0;font-family:var(--serif);font-style:italic;font-size:clamp(14px,1.9vh,17px);color:rgba(241,241,235,.78)}
.c-author::before{content:"";display:inline-block;width:34px;height:1px;background:var(--cyan);vertical-align:middle;margin-right:12px}

/* evidence: mask reveal top → bottom, then settles */
.ev{position:relative;height:calc(100svh - 26vh);
  clip-path:inset(0 0 calc((1 - var(--v)) * 100%) 0);transform:translate3d(0,calc((1 - var(--v)) * 2vh),0)}
.ev .shot{position:absolute}
.ev .prov{position:absolute;left:0;bottom:0;margin:0}
/* Global — digital / site: headline fragment + interface detail beside it (no overlap on the headline) */
.ev-g .main{left:0;top:0;width:60%}
.ev-g .detail{right:0;top:30%;width:44%}
/* Cleaning — horizontal brand board */
.ev-c .board{left:0;top:6%;width:100%}
/* Leci — editorial pairing: statement + portrait arch */
.ev-l .head{left:0;top:4%;width:58%}
.ev-l .arch{right:0;top:14%;width:37%}
/* Pamela — brand hero + commerce/partnerships page */
.ev-p .pm-home{left:0;top:0;width:78%}
.ev-p .part{right:0;top:52%;width:46%;z-index:2}

/* ---------- compact index (while a case is open) ---------- */
.wk-foot{position:absolute;left:6vw;right:6vw;bottom:5vh;z-index:8;display:flex;gap:3.4vw;align-items:baseline;margin:0;padding:14px 0 0;
  border-top:1px solid var(--rule);list-style:none;font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--dim);opacity:var(--foot)}
.wk-foot li{transition:color .4s ease}
.wk-foot li b{font-weight:400;color:var(--cyan);margin-right:10px}
.wk[data-active="c0"] .wk-foot li:nth-child(1),.wk[data-active="c1"] .wk-foot li:nth-child(2),
.wk[data-active="c2"] .wk-foot li:nth-child(3),.wk[data-active="c3"] .wk-foot li:nth-child(4){color:var(--ink)}
.wk-foot li.note{margin-left:auto;text-transform:none;letter-spacing:.02em;font-family:var(--serif);font-style:italic;font-size:14px;color:#8fa1a4}

/* ---------- STATIC (mobile + reduced motion): editorial page ---------- */
.wk.is-static .pin{padding:72px 6vw 40px}
.wk.is-static .runhead{position:static;margin:0 0 28px}
.wk.is-static .wk-index{position:static;opacity:1;transform:none;margin-bottom:12vh}
.wk.is-static .ix-row .ix-name{color:var(--ink);-webkit-text-stroke-color:transparent}
.wk.is-static .ix-row{opacity:1}
.wk.is-static .case{position:relative;inset:auto;opacity:1;transform:none;pointer-events:auto;padding:12vh 0;border-top:1px solid var(--rule)}
.wk.is-static .ev{clip-path:none;transform:none}
.wk.is-static .wk-foot{display:none}

@media(max-width:800px){
  .wk.is-static .pin{padding:64px 20px 24px}
  .ix-row{grid-template-columns:34px minmax(0,1fr);row-gap:6px;padding:18px 0}
  .ix-name{font-size:clamp(32px,10vw,46px);white-space:normal}
  .ix-cat{grid-column:2;text-align:left}
  .wk.is-static .wk-index{margin-bottom:24px}
  .wk.is-static .case{display:block;padding:56px 0 64px}
  .c-num{font-size:26vw;margin:0 0 -7vw}
  .c-name{font-size:clamp(34px,10vw,46px)}
  .c-cat{font-size:12px}
  .c-ctx{font-size:15px}
  .c-role li{font-size:17px;padding:10px 0}
  .ev{height:auto;margin-top:34px;display:flex;flex-direction:column;gap:14px}
  .ev .shot{position:relative;left:auto;right:auto;top:auto;width:100%}
  .ev .shot.detail,.ev .shot.arch,.ev .shot.part{width:72%;margin-left:auto}
  .ev .prov{position:static;margin-top:4px}
}
@media(min-width:801px){
  .wk.is-static .case .ev{height:calc(100svh - 26vh)}
}

/* =====================================================================
   HANDOFF — from operations to system (concept only; chapter not built)
   ===================================================================== */
.ho{--len:2.3}
.ho .pin{background:radial-gradient(ellipse at 50% 55%,rgba(62,142,150,.10),transparent 50%),linear-gradient(180deg,#091015,#0a1216)}
.ho{--cv:clamp(0,(var(--p) - .12) / .5,1);--tx:clamp(0,(var(--p) - .55) / .3,1)}
.ho-lines{position:absolute;left:6vw;right:6vw;top:50%;height:0}
.ho-lines i{position:absolute;left:0;right:0;height:1px;background:linear-gradient(90deg,rgba(131,218,221,.5),rgba(131,218,221,.06));
  transform:translate3d(0,calc(var(--y) * (1 - var(--cv))),0);opacity:calc(.5 + var(--cv) * .5)}
.ho-lines i:nth-child(1){--y:-22vh}.ho-lines i:nth-child(2){--y:-8vh}.ho-lines i:nth-child(3){--y:8vh}.ho-lines i:nth-child(4){--y:22vh}
.ho-lines span{position:absolute;left:0;font-size:12px;letter-spacing:.22em;text-transform:uppercase;color:var(--dim);
  transform:translate3d(0,calc(var(--y) * (1 - var(--cv)) - 18px),0);opacity:calc(1 - var(--cv) * 1.4)}
.ho-lines span:nth-of-type(1){--y:-22vh}.ho-lines span:nth-of-type(2){--y:-8vh}.ho-lines span:nth-of-type(3){--y:8vh}.ho-lines span:nth-of-type(4){--y:22vh}
.ho-from,.ho-to{position:absolute;left:6vw;top:calc(50% - 15vw);margin:0;font-family:var(--serif);font-weight:400;font-size:13vw;line-height:.9;letter-spacing:-.055em;white-space:nowrap}
.ho-from{color:transparent;-webkit-text-stroke:1px rgba(241,241,235,.22);opacity:calc(1 - var(--cv));transform:translate3d(calc(var(--cv) * -4vw),0,0)}
.ho-to{opacity:var(--cv);transform:translate3d(calc((1 - var(--cv)) * 4vw),0,0)}
.ho-text{position:absolute;left:6vw;right:6vw;top:calc(50% + 5vh);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:5vw;
  opacity:var(--tx);transform:translate3d(0,calc((1 - var(--tx)) * 2vh),0)}
.ho-text p{margin:0}
.ho-lead{font-family:var(--serif);font-size:clamp(22px,2.1vw,32px);line-height:1.18;letter-spacing:-.025em;max-width:560px}
.ho-next{align-self:end;justify-self:end;font-size:12px;letter-spacing:.22em;text-transform:uppercase;color:#9fb3b4}
.ho-next b{font-weight:400;color:var(--cyan)}
@media(max-width:800px){
  .ho{--len:2}
  .ho-lines{left:20px;right:20px}
  .ho-from,.ho-to{left:20px;font-size:21vw;top:calc(50% - 30vw)}
  .ho-text{left:20px;right:20px;display:block;top:calc(50% + 4vh)}
  .ho-lead{font-size:22px}
  .ho-next{display:block;margin-top:28px!important}
}

.end{min-height:36svh;display:grid;place-items:center;padding:48px 20px;border-top:1px solid var(--rule);
  color:#6f8386;font-size:12px;letter-spacing:.18em;text-transform:uppercase;text-align:center;line-height:2}
.end b{color:var(--cyan);font-weight:400}

/* =========================================================================
   FULL HOME V1 — chapters 05–09 + integration glue.
   Inherited chapters (01–04) keep their own CSS (flow.css, study.css, work.css).
   New classes are prefixed (dc-, pr-, st-, ct-, cl-, h-) to avoid collisions.
   ========================================================================= */

/* ---- integration: Method → Work handoff is seamless (same frame overlaps) ---- */
.motion .t-method{margin-top:-100svh;position:relative;z-index:3}
.phflow{position:relative;z-index:1}

/* ---- shared chapter scaffolding ---- */
.h-eb{display:flex;align-items:center;gap:14px;margin:0;font-size:12px;letter-spacing:.24em;text-transform:uppercase;color:#9fb3b4}
.h-eb::before{content:"";width:34px;height:1px;background:var(--cyan)}
.h-eb b{font-weight:400;color:var(--cyan)}
.h-title{margin:0;font-family:var(--serif);font-weight:400;letter-spacing:-.045em;line-height:.98}
.h-chapter-num{position:absolute;margin:0;font-family:var(--serif);line-height:.8;letter-spacing:-.06em;color:transparent;pointer-events:none}

/* reveal on enter (06–09). Without .motion everything is simply visible. */
.motion .rv{opacity:0;transform:translate3d(0,26px,0);transition:opacity .9s cubic-bezier(.2,.7,.2,1),transform .9s cubic-bezier(.2,.7,.2,1)}
.motion .rv.in{opacity:1;transform:none}
.motion .rv.d1{transition-delay:.08s}.motion .rv.d2{transition-delay:.16s}.motion .rv.d3{transition-delay:.24s}

/* =========================================================================
   05 — D.O COMMAND  (V2)
   Desktop: 3 large surfaces + 3 orbiting details: fragmentation → organisation → one system.
   ========================================================================= */
.dc{--len:3.6;--a:clamp(0,var(--p) / .1,1);--o:clamp(0,(var(--p) - .12) / .36,1);--z:clamp(0,(var(--p) - .58) / .2,1);--f:clamp(0,(var(--p) - .72) / .14,1)}
.dc .runhead{position:absolute;left:6vw;top:5vh;z-index:9;margin:0;font-size:12px;letter-spacing:.22em;text-transform:uppercase;color:var(--dim)}
.dc .runhead b{font-weight:400;color:#9fb3b4}
.dc-sup{margin:0;max-width:380px;color:var(--muted);font-size:clamp(13.5px,1.7vh,15px);line-height:1.62;opacity:calc(var(--a) * (1 - var(--o) * 1.6))}

.s-main{left:37vw;top:14vh;width:45vw;z-index:4;--dx:5vw;--dy:-7vh;--ds:-.14;--db:6}
.s-fin{left:61vw;top:47vh;width:33vw;z-index:5;--dx:12vw;--dy:18vh;--ds:.1;--db:7}
.s-dash{left:34vw;top:55vh;width:25vw;z-index:3;--dx:-9vw;--dy:16vh;--ds:-.1;--db:7}
.d-msg{left:65vw;top:5vh;width:15vw;--dx:-14vw;--dy:10vh;--db:8}
.d-clients{left:84vw;top:12vh;width:12vw;--dx:6vw;--dy:24vh;--db:9}
.d-cal{left:84vw;top:79vh;width:11vw;--dx:-20vw;--dy:-30vh;--db:9}

.dcm{display:none}

/* ---- static desktop (reduced motion ≥801px): text + final system surface + the three main surfaces ---- */
@media(min-width:801px){
  .dc.is-static .pin{padding:14vh 6vw 12vh;display:grid;grid-template-columns:minmax(0,.62fr) minmax(0,1.38fr);gap:4vw 5vw;align-items:start}
  .dc.is-static .runhead{position:absolute}
}

/* ---- mobile + tablet (static): own art direction — grouped modules, large fragments ---- */
@media(max-width:800px){
  .dc.is-static .pin{padding:72px 20px 88px}
  .dc.is-static .runhead{position:static;margin:0 0 30px}
  .dc-sup{font-size:15px}
  .dcm{display:block;margin-top:56px}
}
@media(min-width:601px) and (max-width:800px){
  .dc.is-static .pin{padding:88px 8vw 96px}
}

/* =========================================================================
   06 — PRODUCTS / IDEIAS  (first light chapter)
   ========================================================================= */
.pr{position:relative;background:#f1efe9;color:#141a1c;padding:16vh 6vw 18vh;overflow:clip}
.pr .h-chapter-num{right:4vw;top:6vh;font-size:22vw;-webkit-text-stroke:1px rgba(20,26,28,.08)}
.pr-a{grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr)}
.pr-c{grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr)}
.pr-for{margin:18px 0 0;max-width:440px;color:#4f5c60;font-size:15px;line-height:1.6}
.pr-for b{display:block;margin-bottom:4px;font-size:12px;font-weight:400;letter-spacing:.22em;text-transform:uppercase;color:#58656a}
.pr-status{display:inline-flex;align-items:center;gap:10px;margin:24px 0 0;padding:8px 14px;border:1px solid rgba(20,26,28,.18);
  font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:#33403f}
.pr-status::before{content:"";width:6px;height:6px;border-radius:50%;background:#c8962f}
.pr-media .prov{color:#58656a}
.pr-media .prov b{color:#33403f}
.bp{position:relative;padding:5vh 3vw;border:1px solid rgba(20,26,28,.16);background:#faf9f5}
.bp .bp-cap{margin:14px 0 0;font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:#58656a}
.pr-note{margin:8vh 0 0;font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:#58656a}
@media(max-width:800px){
  .pr{padding:88px 20px 96px}
  .pr .h-chapter-num{font-size:40vw;top:24px}
  .pr-item,.pr-a,.pr-b,.pr-c{display:flex;flex-direction:column;align-items:stretch;gap:30px;padding:56px 0}
  .bp{padding:26px 20px}
}
@media(min-width:601px) and (max-width:800px){
}

/* =========================================================================
   07 — PATRICK / HISTÓRIA  (back to the person — warm, human)
   ========================================================================= */
.st{position:relative;min-height:100svh;overflow:clip;color:var(--ink);
  background:radial-gradient(ellipse at 30% 60%,rgba(181,146,98,.16),transparent 55%),linear-gradient(180deg,#14120f 0%,#0f0e0c 100%)}
.st-photo{position:absolute;left:4vw;bottom:0;height:92svh;width:auto;max-width:48vw;z-index:1;
  -webkit-mask-image:linear-gradient(to bottom,#000 70%,transparent 99%);mask-image:linear-gradient(to bottom,#000 70%,transparent 99%);
  filter:saturate(.92) contrast(1.03) brightness(.95) drop-shadow(0 30px 50px rgba(0,0,0,.45))}
.st-glow{position:absolute;left:8vw;bottom:10svh;width:40vw;height:60svh;border-radius:50%;background:rgba(214,170,110,.1);filter:blur(80px);z-index:0}
.st .h-chapter-num{left:3vw;top:4vh;font-size:20vw;-webkit-text-stroke:1px rgba(241,241,235,.06);z-index:0}
.st-text{position:relative;z-index:2;margin-left:52vw;padding:18vh 6vw 14vh 0;max-width:640px}
.st-text .h-eb{color:#c9b89c}
.st-text .h-eb::before{background:#d6aa6e}
.st-text .h-eb b{color:#d6aa6e}
.st-title{margin-top:26px;font-size:clamp(48px,5.4vw,88px)}
.st-title .dot{color:#d6aa6e}
.st-copy{margin:30px 0 0;max-width:500px;font-family:var(--serif);font-size:clamp(19px,1.55vw,23px);line-height:1.42;color:rgba(241,241,235,.86)}
.st-copy + .st-copy{margin-top:16px}
.st-path{list-style:none;margin:6vh 0 0;padding:0;border-top:1px solid rgba(241,241,235,.12)}
.st-path li{display:grid;grid-template-columns:92px minmax(0,1fr);gap:16px;padding:12px 0;border-bottom:1px solid rgba(241,241,235,.12);font-size:14px;color:#c7c1b6}
.st-path li span{font-size:12px;letter-spacing:.22em;text-transform:uppercase;color:#d6aa6e;align-self:center}
.st-sign{margin:4vh 0 0;font-family:var(--serif);font-style:italic;font-size:17px;color:rgba(241,241,235,.7)}
@media(max-width:800px){
  .st{min-height:0;padding-top:0}
  .st-photo{position:relative;left:auto;bottom:auto;display:block;height:auto;width:86vw;max-width:none;margin:0 auto;
    -webkit-mask-image:linear-gradient(to bottom,#000 72%,transparent 100%);mask-image:linear-gradient(to bottom,#000 72%,transparent 100%)}
  .st-glow{left:10vw;top:12vh;bottom:auto;width:80vw;height:60vh}
  .st .h-chapter-num{font-size:40vw}
  .st-photo-wrap{padding-top:64px}
  .st-text{margin:-12vh 0 0;padding:0 20px 88px}
  .st-title{font-size:clamp(44px,12.4vw,58px)}
  .st-copy{font-size:19px}
}
@media(min-width:601px) and (max-width:800px){
  .st-photo{width:62vw}
  .st-text{margin-top:-8vh;padding:0 10vw 96px}
}

/* =========================================================================
   08 — CONTEÚDO / IDEIAS  (V2: editorial index is the protagonist; photo = small detail)
   ========================================================================= */
.ct{position:relative;background:#e9e5dc;color:#171b1c;padding:16vh 6vw 16vh;overflow:clip}
.ct-head{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:5vw;align-items:end;margin-bottom:10vh}
.ct-head .h-title{margin-top:24px;font-size:clamp(46px,5.2vw,86px);color:#10181b}
.ct-head .h-title .dot{color:#1f7f86}
.ct-intro{display:grid;grid-template-columns:96px minmax(0,1fr);gap:22px;align-items:end}
.ct-intro p{margin:0;max-width:400px;color:#4f5a5c;font-size:16px;line-height:1.6}
.ct-detail{margin:0;width:96px;aspect-ratio:4 / 5;overflow:hidden;background:#d9d3c6}
.ct-detail img{width:100%;height:100%;object-fit:cover;object-position:50% 8%;transform:scale(1.9);transform-origin:50% 8%;filter:saturate(.75) contrast(1.02)}
.ct-index{list-style:none;margin:0;padding:0;border-top:1px solid rgba(23,27,28,.2)}
.ct-cat{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.6fr);gap:4vw;align-items:center;padding:4vh 0;border-bottom:1px solid rgba(23,27,28,.2)}
.ct-word{margin:0;font-family:var(--serif);font-size:clamp(40px,4.6vw,76px);letter-spacing:-.045em;line-height:.95;color:#10181b}
.ct-item{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2.4vw;align-items:center}
.ct-item.has-cover{grid-template-columns:84px minmax(0,1fr) auto}
.ct-cover{width:84px;box-shadow:0 14px 30px rgba(0,0,0,.18)}
.ct-meta{margin:0;font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:#58656a}
.ct-meta b{font-weight:400;color:#1a7077}
.ct-title{margin:8px 0 0;font-family:var(--serif);font-weight:400;font-size:clamp(20px,1.8vw,28px);letter-spacing:-.02em;line-height:1.12;color:#10181b}
.ct-desc{margin:6px 0 0;font-size:14px;line-height:1.5;color:#58666a}
.ct-go{font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:#10181b;text-decoration:none;border-bottom:1px solid #1f7f86;padding-bottom:3px;white-space:nowrap}
.ct-soon{font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:#8a9496;white-space:nowrap}
.ct-cat.is-soon{padding:2.6vh 0}
.ct-cat.is-soon .ct-word{font-size:clamp(28px,2.8vw,44px);color:#8a9194}
.ct-cat.is-soon .ct-title{font-size:18px;color:#7b8588}
@media(max-width:800px){
  .ct{padding:88px 20px}
  .ct-head{display:block;margin-bottom:44px}
  .ct-head .h-title{font-size:clamp(40px,11.4vw,54px)}
  .ct-intro{margin-top:24px;grid-template-columns:64px minmax(0,1fr);gap:16px}
  .ct-detail{width:64px}
  .ct-intro p{font-size:15px}
  .ct-cat{display:block;padding:30px 0}
  .ct-word{font-size:clamp(36px,10.6vw,48px);margin-bottom:16px}
  .ct-item,.ct-item.has-cover{grid-template-columns:minmax(0,1fr);gap:14px}
  .ct-item.has-cover{grid-template-columns:72px minmax(0,1fr)}
  .ct-item.has-cover .ct-go{grid-column:1 / -1}
  .ct-cover{width:72px}
  .ct-item .ct-go,.ct-item .ct-soon{justify-self:start}
  .ct-cat.is-soon{padding:22px 0}
  .ct-cat.is-soon .ct-word{font-size:30px;margin-bottom:8px}
}
@media(min-width:601px) and (max-width:800px){
  .ct{padding:96px 8vw}
  .ct-head{display:grid;grid-template-columns:1fr 1fr;gap:6vw;align-items:end}
  .ct-cat{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.4fr);gap:5vw}
  .ct-word{margin:0}
}

/* =========================================================================
   09 — CONTATO / CLOSING  (B&W, negative space, back to the dark of the Hero)
   ========================================================================= */
.cl{position:relative;min-height:100svh;overflow:clip;background:#050708;color:var(--ink);display:flex;align-items:center}
.cl-photo{position:absolute;right:3vw;bottom:0;height:94svh;width:auto;max-width:52vw;z-index:0;
  filter:grayscale(1) contrast(1.08) brightness(.86);
  -webkit-mask-image:linear-gradient(to left,transparent 0,#000 12%,#000 80%,transparent 100%),linear-gradient(to bottom,#000 70%,transparent 99%);
  -webkit-mask-composite:source-in;mask-image:linear-gradient(to left,transparent 0,#000 12%,#000 80%,transparent 100%),linear-gradient(to bottom,#000 70%,transparent 99%);mask-composite:intersect}
.cl-text{position:relative;z-index:2;padding:16vh 6vw 20vh;max-width:760px}
.cl-title{margin-top:28px;font-size:clamp(50px,6vw,100px)}
.cl-sup{margin:30px 0 0;max-width:470px;font-family:var(--serif);font-size:clamp(19px,1.6vw,24px);line-height:1.38;color:rgba(241,241,235,.8)}
.cl-cta{display:inline-flex;align-items:center;gap:40px;margin-top:44px;padding:18px 24px;border:1px solid rgba(131,218,221,.55);
  color:var(--ink);text-decoration:none;font-size:13px;letter-spacing:.04em}
.cl-cta b{color:var(--cyan);font-weight:400;font-size:18px}
.cl-meta{display:flex;flex-wrap:wrap;gap:12px 34px;margin:48px 0 0;padding:18px 0 0;border-top:1px solid rgba(241,241,235,.1);
  font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:#7c8b8e}
.cl-meta a{color:#9fb3b4;text-decoration:none}
@media(max-width:800px){
  .cl{display:block;min-height:0}
  .cl-photo{position:relative;right:auto;display:block;height:auto;width:84vw;max-width:none;margin:0 0 0 auto;
    -webkit-mask-image:linear-gradient(to bottom,#000 66%,transparent 100%);mask-image:linear-gradient(to bottom,#000 66%,transparent 100%)}
  .cl-text{margin-top:-18vh;padding:0 20px 80px}
  .cl-title{font-size:clamp(42px,11.6vw,56px)}
}
@media(min-width:601px) and (max-width:800px){
  .cl-photo{width:60vw}
  .cl-text{margin-top:-10vh;padding:0 10vw 96px}
}

/* =========================================================================
   TABLET (601–800px) fixes for inherited chapters
   The approved flow's ≤800px art direction is phone-first; at 768×1024 the
   Hero portrait became oversized (open issue from study 03).
   ========================================================================= */
@media(min-width:601px) and (max-width:800px){
  .L-hero .content{padding-top:64px}
  .L-hero h1{font-size:86px}
  .L-hero .thesis{max-width:470px;font-size:30px}
  .L-hero .lead{max-width:430px;font-size:14px}
  .L-hero .patrick{width:42vw;top:auto;bottom:0;right:3vw;
    -webkit-mask-image:linear-gradient(to bottom,#000 0,#000 82%,transparent 100%);mask-image:linear-gradient(to bottom,#000 0,#000 82%,transparent 100%)}
  .L-hero .patrick-stage::before{top:auto;bottom:0;right:0}
  .L-hero .word-build{top:auto;bottom:20%;font-size:150px}
  .L-hero .halo{top:auto;bottom:-8%}
}

/* =========================================================================
   V2 — global rhythm (shorter sticky tracks), navigation, products index, tablet
   ========================================================================= */
.t-method{--len:1.9}
.wk{--len:5.6}
.ho{--len:1.8}
@media(max-width:800px){ .t-method{--len:1.6} .ho{--len:1.6} }


.pr-index span{font-family:var(--sans);font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:#58656a}

/* tablet 601–800: two-column compositions instead of inherited phone stacks */
@media(min-width:601px) and (max-width:800px){
  .pr{padding:96px 8vw}
  .pr-a,.pr-b,.pr-c{display:grid;grid-template-columns:1fr 1fr;gap:5vw;align-items:center}
  .st{display:grid;grid-template-columns:44vw minmax(0,1fr);align-items:end;min-height:0}
  .st-photo-wrap{padding-top:10vh;grid-column:1;grid-row:1}
  .st-photo{width:44vw;margin:0}
  .st-text{grid-column:2;grid-row:1;margin:0;padding:12vh 7vw 10vh 3vw}
  .st-title{font-size:56px}
  .st-copy{font-size:18px}
  .cl{display:flex;align-items:flex-end;min-height:80vh}
  .cl-photo{position:absolute;right:0;bottom:0;width:auto;height:74vh;max-width:56vw;margin:0}
  .cl-text{margin:0;padding:14vh 8vw 12vh;max-width:62vw}
  .cl-title{font-size:58px}
}

/* =========================================================================
   V2 — length pass 2 (desktop −22%, mobile less dead scroll)
   ========================================================================= */
.wk{--len:5.2}
.dc{--len:3.3}
.pr{padding:13vh 6vw 13vh}
.pr-note{margin-top:5vh}
@media(max-width:800px){
  .wk.is-static .case{padding:40px 0 44px}
  .wk.is-static .wk-index{margin-bottom:8px}
  .c-role{margin-top:20px}
  .c-role li{padding:8px 0;font-size:16px}
  .c-author{margin-top:16px}
  .dcm{margin-top:40px}
  .dc.is-static .pin{padding:64px 20px 64px}
  .pr{padding:72px 20px 72px}
  .pr-item,.pr-a,.pr-b,.pr-c{padding:36px 0;gap:22px}
  .ct{padding:72px 20px}
}
@media(max-width:600px){
  .ev-g .detail,.ev-l .arch{display:none}
  .ev .shot.part{width:64%}
}
@media(min-width:601px) and (max-width:800px){
  .cl-photo{height:64vh;max-width:44vw}
  .cl-text{max-width:58vw;padding:12vh 0 12vh 8vw}
  .cl-title{font-size:50px}
}

/* =========================================================================
   Patrick Hub integration (real site). The shared site header replaces the
   prototype's in-hero bar; on the home it sits over the Hero and scrolls away.
   ========================================================================= */
.ph h1,.ph h2,.ph h3{text-wrap:wrap}
.ph .shot > img{display:block;width:100%;height:auto;background:#fff}
.ph-topspace{height:76px}
@media(max-width:800px){ .ph-topspace{height:64px} }
.ph .ix-name{display:block}
.page-home .topbar{position:absolute;top:0;left:0;right:0;z-index:60;background:transparent;border-bottom:0;color:#f1f1eb}
.page-home .topbar-inner{width:min(1320px,calc(100% - 64px));max-width:none;margin:0 auto;padding:0;height:76px;border-bottom:1px solid rgba(255,255,255,.12)}
.page-home .brand{gap:14px;font-family:Arial,Helvetica,sans-serif}
.page-home .brand-mark{width:34px;height:34px;display:grid;place-items:center;border:1px solid rgba(255,255,255,.27);font:15px/1 'Bodoni Moda',Georgia,serif;letter-spacing:0}
.page-home .brand-name{font:400 13px/1.2 Arial,Helvetica,sans-serif;letter-spacing:0;text-transform:none}
.page-home .brand-name small{display:none}
.page-home .home-nav{display:flex;align-items:center;gap:29px}
.page-home .home-nav a{font:12px/1 Arial,Helvetica,sans-serif;color:#bec7c8;text-decoration:none;min-height:44px;display:inline-flex;align-items:center}
.page-home .home-nav a:hover,.page-home .home-nav a:focus-visible{color:#f1f1eb}
.page-home .lang-switch{font:12px/1 Arial,Helvetica,sans-serif;letter-spacing:0;color:#83dadd}
.page-home .lang-switch .lang-current{color:#83dadd}
.page-home .lang-switch a{color:#83dadd;opacity:.75}
.page-home .lang-sep{color:#83dadd}
@media(min-width:961px){
  .page-home .site-menu{gap:29px}
  .page-home .site-menu .primary-nav,.page-home .site-menu .command-pill{display:none}
}
@media(max-width:960px){
  .page-home .menu-toggle{color:#f1f1eb}
  .page-home .home-nav{flex-direction:column;align-items:stretch;gap:0;padding-bottom:18px;margin-bottom:10px;border-bottom:1px solid rgba(255,255,255,.14)}
  .page-home .home-nav a{font:24px/1.2 'Bodoni Moda',Georgia,serif;color:#f1f1eb;padding-block:10px;min-height:48px}
}
@media(max-width:800px){ .page-home .topbar-inner{width:calc(100% - 32px);height:64px} }
.ph .cl-lang a{color:#9fb3b4;text-decoration:none}
.ph .cl-lang a[aria-current]{color:#83dadd}
.ph .cl-meta a{color:#9fb3b4}

/* Home menu: the chapter link "Sobre/About" replaces the duplicate /sobre/ page link in the same menu
   (the page and every inner-page menu stay unchanged). */
.page-home .site-menu .primary-nav a[href="/pt/sobre/"],.page-home .site-menu .primary-nav a[href="/en/about/"]{display:none}

/* D.O Command chapter: canonical pre-launch interest CTA (PR #184 gate), in the Hero CTA's outline language */
.ph .dc-cta{display:inline-flex;align-items:center;gap:28px;min-height:44px;margin-top:18px;padding:0 18px;border:1px solid rgba(131,218,221,.5);
  color:var(--ink);text-decoration:none;font:12px/1 Arial,Helvetica,sans-serif;letter-spacing:.02em;pointer-events:auto}
.ph .dc-cta span{color:var(--cyan);font-size:16px}
.ph .dc-cta:hover,.ph .dc-cta:focus-visible{background:rgba(131,218,221,.08)}
.ph .dc-login{display:inline-block;margin:18px 0 0 14px;color:var(--ink);font:12px/1.4 Arial,Helvetica,sans-serif;text-decoration:underline;text-decoration-color:rgba(131,218,221,.65);text-underline-offset:4px;pointer-events:auto}
.ph .dc-login:hover,.ph .dc-login:focus-visible{color:var(--cyan);outline-offset:4px}

/* ---- PR #200 review fixes ---- */
/* #4 D.O Command CTA: not focusable/clickable until the closing frame is visible (data-live set by the scrub engine) */
.ph .dc:not(.is-static):not([data-live]) .dc-cta{visibility:hidden}
.ph .dc:not(.is-static):not([data-live]) .dc-login{visibility:hidden}
/* #5 chapters focused by in-page navigation (tabindex=-1): no focus ring on the whole section */
.ph [tabindex="-1"]:focus{outline:none}
/* #2 discreet adaptive entry at the end of Products (inline, not floating) */
.pr-path{margin:5vh 0 0}
.pr-path-btn{display:inline-flex;align-items:baseline;gap:12px;padding:0 0 4px;border:0;border-bottom:1px solid #1f7f86;background:none;
  color:#10181b;font:400 clamp(17px,1.4vw,20px)/1.3 'Bodoni Moda',Georgia,"Times New Roman",serif;letter-spacing:-.01em;cursor:pointer}
.pr-path-btn span{font:12px/1 Arial,Helvetica,sans-serif;letter-spacing:.18em;text-transform:uppercase;color:#58656a}
.pr-path-btn b{font-weight:400;color:#1a7077}
.pr-path-btn:hover,.pr-path-btn:focus-visible{border-bottom-width:2px}
@media(max-width:800px){ .pr-path{margin-top:28px} .pr-path-btn{flex-wrap:wrap;row-gap:6px} }

/* =========================================================================
   WAVE 0 SPATIAL WORLD (2026-09-30) — Hero + Builder + shared camera
   Visual authority: Wave 0 canonical masters (VG-01 ecosystem key art, ECO-02 / ECO-03 portrait-in-architecture).
   Rule: GENERATE THE ENVIRONMENT, PRESERVE THE EVIDENCE. The environment is a real perspective corridor built in code
   (planes, frames, structural teal lines, depth layers); Patrick (VG-01 master, real cutout in the Builder) and every
   proof surface are preserved as-is. One camera moves through the same structure from Hero to Builder.
   ========================================================================= */

.stage{background:#060a12}
.arch-wrap{position:absolute;inset:0;overflow:hidden;pointer-events:none;background:#060a12}
.arch{position:absolute;inset:0;width:100%;height:100%;display:block;transform-origin:70% 38%}
.arch-m{display:none;transform-origin:50% 56%}
.arch-arcs{opacity:.9}
.arch-glow{position:absolute;inset:0;
  background:
    radial-gradient(ellipse 34% 42% at 70% 38%,rgba(72,158,178,.2),rgba(72,158,178,0) 72%),
    linear-gradient(180deg,rgba(6,10,18,.55) 0%,rgba(6,10,18,0) 24%,rgba(6,10,18,0) 70%,rgba(6,10,18,.6) 100%)}

/* shared camera: one world behind the whole flow while it scrolls; local copies serve static / reduced-motion layers */
.arch-wrap.shared{display:none}
.phflow.is-motion .arch-wrap.shared{display:block;z-index:0;
  opacity:calc(1 - var(--m) * .82)}
.phflow.is-motion .arch-wrap.local{display:none}
.arch-wrap.local{z-index:-1}
.phflow.is-motion .shared .arch-d{
  transform:translate3d(calc((var(--b1) * -.10 + var(--b2) * -.13) * 100vw),calc(var(--b3) * -2vh),0)
            scale(calc(1 + var(--hx) * .85 + (var(--b1) + var(--b2) + var(--b3) + var(--b4) + var(--b5)) * .3))}
.phflow.is-motion .shared .arch-m{
  transform:scale(calc(1 + var(--hx) * .85 + (var(--b1) + var(--b2) + var(--b3) + var(--b4) + var(--b5)) * .3))}
.phflow:not(.is-motion) .L-build .arch-d,.phflow:not(.is-motion) .L-build .arch-m{transform:scale(1.55)}
.phflow.is-motion .ph-hero{background:none}
.phflow.is-motion .L-build{background:none}
.phflow.is-motion .L-build::before{display:none}
.ph-hero,.L-build{background:#060a12}
.ph-hero::before,.ph-hero::after{content:none}

/* ---- Hero: VG-01 master inside the architecture ---- */
.ph-hero .grid,.ph-hero .halo,.ph-hero .core,.ph-hero .hx-build,.ph-hero .hx-operate{display:none}
.hs-master{position:absolute;right:1.5vw;bottom:72px;height:calc(100% - 72px);display:block}
.hs-img{display:block;height:100%;width:auto;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 32%,#000 90%,transparent 100%),linear-gradient(180deg,transparent 0,#000 12%);
  -webkit-mask-composite:source-in;
          mask-image:linear-gradient(90deg,transparent 0,#000 32%,#000 90%,transparent 100%),linear-gradient(180deg,transparent 0,#000 12%);
          mask-composite:intersect;
  filter:saturate(.96) contrast(1.03)}
.ph-hero .vertical{display:none}
.ph-hero .thread{bottom:96px}
.ph-hero .content{padding-bottom:130px}
.phflow.is-motion[data-phase="0"] .L-hero .lead,
.phflow.is-motion[data-phase="0"] .L-hero .thread{opacity:0;visibility:hidden}

/* next-field strip: warm cream paper rhythm between the worlds */
.hero-next{position:absolute;z-index:30;left:0;right:0;bottom:0;height:56px;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;
  padding:0 max(36px,4vw);background:#f1ece0;color:#0d141b;text-decoration:none}
.hero-next span{font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:#6d6a63}
.hero-next .hn-t{font-family:'Bodoni Moda',Georgia,"Times New Roman",serif;font-size:clamp(20px,1.9vw,28px);letter-spacing:-.02em;text-transform:none;color:#0d141b}
.hero-next .hn-n{justify-self:end}
.hero-next:focus-visible{outline:2px solid var(--cyan);outline-offset:-4px}
.phflow.is-motion .hero-next{opacity:calc(1 - var(--hx) * 3.4)}

/* ---- Builder: the real Patrick (tablet) placed inside the same structure; proof on a physical cream sheet ---- */
.b-frag{position:absolute;margin:0;left:71vw;top:63vh;width:min(19vw,290px);transform:rotate(-1.4deg)}
.b-paper{position:absolute;left:-10px;top:-10px;right:-10px;bottom:34px;background:#efe8d8;transform:rotate(1.6deg);box-shadow:0 30px 60px rgba(0,0,0,.5)}
.b-frag img{position:relative;display:block;width:100%;height:auto;box-shadow:0 10px 30px rgba(0,0,0,.35)}
.b-frag figcaption{position:relative;margin-top:16px;font-size:12px;letter-spacing:.17em;text-transform:uppercase;color:#b6c4c8;line-height:1.7}
.phflow.is-motion .b-frag{opacity:var(--b4);transform:translate3d(calc((1 - var(--b4)) * 3vw),0,0) rotate(-1.4deg)}
.b-rim{opacity:1}

/* tablet + phone: portrait composition */
@media(min-width:801px) and (max-width:1023px){
  .hs-master{right:0;height:52vh}
  .b-fb{left:5vw}
  .b-frag{display:none}
}
@media(max-width:800px){
  .arch-d{display:none}
  .arch-m{display:block}
  .arch-glow{background:
    radial-gradient(ellipse 60% 34% at 50% 56%,rgba(72,158,178,.2),rgba(72,158,178,0) 72%),
    linear-gradient(180deg,rgba(6,10,18,.4) 0%,rgba(6,10,18,0) 30%,rgba(6,10,18,0) 74%,rgba(6,10,18,.55) 100%)}
  .hs-master{left:0;right:0;bottom:60px;height:auto;width:100%}
  .hs-img{width:100%;height:auto;
    -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 26%);-webkit-mask-composite:source-over;
            mask-image:linear-gradient(180deg,transparent 0,#000 26%);mask-composite:add}
  .hero-next{height:60px;grid-template-columns:auto 1fr;gap:14px;padding:0 20px}
  .hero-next .hn-n{display:none}
  .hero-next .hn-t{justify-self:start;font-size:17px}
  .ph-hero .content{padding-bottom:0}
  .b-frag{display:none}
}

/* the real Patrick cutout takes the Wave 0 grade: cooler navy shadows and a teal rim light from the structure */
.b-fig{filter:saturate(.8) contrast(1.08) brightness(.9) drop-shadow(-5px 0 12px rgba(72,170,190,.3)) drop-shadow(0 18px 30px rgba(0,0,0,.45))}

/* ---- Refinement pass (owner review): Patrick keeps the protagonist role in the Builder ---- */
@media(min-width:801px){
  .b-fb{height:108vh;top:1vh;left:19vw}
  .w3{font-size:13.5vw}
  .b-copy{top:15vh}
}
.phflow.is-motion .shared{opacity:calc((1 - var(--m) * .82) * (1 - var(--b3) * .18))}
.arch-glow{background:
    radial-gradient(ellipse 34% 42% at 70% 38%,rgba(72,158,178,.13),rgba(72,158,178,0) 72%),
    linear-gradient(180deg,rgba(6,10,18,.55) 0%,rgba(6,10,18,0) 24%,rgba(6,10,18,0) 70%,rgba(6,10,18,.6) 100%)}

/* Builder: Patrick enters as a solid figure and is *lit up* by the structure (light, not transparency) */
.phflow.is-motion .b-fb{
  opacity:calc(min(1, var(--b1) * 4) * (1 - var(--m)));
  filter:blur(calc(var(--pb) * 1px + var(--m) * 4px)) brightness(calc(.62 + var(--pp) * .38)) saturate(calc(1 - var(--m) * .7));
}
.b-rim{opacity:.32}

/* =========================================================================
   THE WORLD (WebGL) — hooks. When world.js runs it adds .has-world: the dark chapters become windows into the
   3D space; the figures (builder / about / contact) live inside the scene, so their DOM fallbacks are hidden.
   ========================================================================= */
html.has-world body.page-home{background:#060a12}
html.has-world .phflow .arch-wrap.shared,html.has-world .phflow.is-motion .arch-wrap.shared{display:none}
html.has-world .phflow .stage,html.has-world .ph-hero,html.has-world .phflow.is-motion .ph-hero,html.has-world .phflow.is-motion .L-build,html.has-world .L-build,html.has-world .L-method,
html.has-world .t-method .pin,html.has-world .ho .pin,html.has-world .wp,html.has-world .st,html.has-world .cl{background:transparent}
html.has-world .wp-world,html.has-world .st-world,html.has-world .cl-world{display:none}
html.has-world .b-fb,html.has-world .st-photo-wrap,html.has-world .cl-stage{visibility:hidden}
/* the approved Hero portrait (locked) separates from the world in depth */
html.has-world .hs-master{transform:translate3d(calc(var(--wx,0) * -9px),calc(var(--wy,0) * -5px),0);will-change:transform}
/* legibility over a living background */
html.has-world .content{position:relative}
html.has-world .content::before{content:"";position:absolute;inset:-6vh -6vw -6vh -8vw;z-index:-1;background:radial-gradient(ellipse 60% 62% at 34% 50%,rgba(5,9,16,.66),rgba(5,9,16,0) 72%)}
html.has-world .b-copy::before{content:"";position:absolute;inset:-8vh -4vw;z-index:-1;background:radial-gradient(ellipse 60% 60% at 55% 45%,rgba(5,9,16,.62),rgba(5,9,16,0) 70%)}
html.has-world .tm-intro,html.has-world .tm-bridge,html.has-world .ho-text{text-shadow:0 2px 30px rgba(3,6,12,.7)}
/* foreground glass in the hero: structure in FRONT of Patrick, moving against the world */
.hero-glass{position:absolute;z-index:8;pointer-events:none;border:1px solid rgba(131,218,221,.22);background:linear-gradient(135deg,rgba(120,210,225,.07),rgba(120,210,225,.015));
  box-shadow:inset 0 0 40px rgba(131,218,221,.05);backdrop-filter:blur(1.5px)}
.hero-glass.g1{right:1.2vw;top:16vh;width:11vw;height:58vh;transform:perspective(900px) rotateY(-24deg) translate3d(calc(var(--wx,0) * 16px),calc(var(--wy,0) * 8px),0)}
.hero-glass.g2{right:19vw;bottom:9vh;width:6vw;height:26vh;transform:perspective(900px) rotateY(-24deg) translate3d(calc(var(--wx,0) * 26px),calc(var(--wy,0) * 12px),0)}
@media(max-width:800px){.hero-glass{display:none}}

/* =========================================================================
   04 — SELECTED WORK: a compact proof gallery inside the world (was four pinned chapters)
   ========================================================================= */
.wp{position:relative;padding:11vh 4.5vw 12vh;background:#070c15;color:var(--ink);overflow:clip;isolation:isolate}
.wp-world{opacity:.55}
.wp-world .arch-d,.wp-world .arch-m{transform:scale(1.5)}
.wp-in{position:relative;z-index:2;display:grid;gap:6vh}
.wp-lab{display:flex;align-items:center;gap:14px;margin:0 0 2.4vh;font-size:12px;letter-spacing:.24em;text-transform:uppercase;color:#a9bcbd}
.wp-lab b{font-weight:400;color:var(--cyan)}
.wp-lab::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,rgba(131,218,221,.34),transparent)}
.wp-row{display:grid;gap:1.6vw;perspective:1600px;perspective-origin:50% 40%}
.wp-bt .wp-row{grid-template-columns:repeat(3,1fr)}
.wp-card{--ry:0deg;--tz:0px;--tx:0;--ty:0;position:relative;display:grid;background:linear-gradient(160deg,rgba(14,26,44,.72),rgba(8,15,27,.66));
  border:1px solid rgba(131,218,221,.16);box-shadow:0 34px 60px rgba(0,0,0,.42),inset 0 1px 0 rgba(160,230,240,.08);backdrop-filter:blur(6px);
  transform-style:preserve-3d;transform:rotateY(calc(var(--ry) + var(--tx) * 5deg)) rotateX(calc(var(--ty) * -4deg)) translateZ(var(--tz));transition:transform .35s cubic-bezier(.2,.7,.2,1),border-color .3s}
.wp-card:hover{border-color:rgba(131,218,221,.38)}
.wp-bt .wp-card:nth-child(1){--ry:7deg}.wp-bt .wp-card:nth-child(3){--ry:-7deg}.wp-bt .wp-card:nth-child(2){--tz:26px}
.wp-bt .wp-card{grid-template-rows:auto 1fr}
.wp-fig{position:relative;margin:0;overflow:hidden;background:#0a1424;transform:translateZ(30px)}
.wp-fig img{display:block;width:100%;height:100%;object-fit:cover;object-position:top left}
.wp-bt .wp-fig{aspect-ratio:16 / 8.4}
.wp-tx{position:relative;padding:2.4vh 1.5vw 2.6vh;transform:translateZ(44px);display:flex;flex-direction:column;justify-content:center}
.wp-kick{margin:0;font-size:12px;letter-spacing:.24em;text-transform:uppercase;color:var(--cyan)}
.wp-bt .wp-kick{color:#c9b89c}
.wp-name{margin:8px 0 0;font-family:var(--serif);font-weight:400;font-size:clamp(22px,2.1vw,34px);letter-spacing:-.04em;line-height:1}
.wp-name .dot{color:var(--cyan)}
.wp-line{margin:10px 0 0;font-size:13px;line-height:1.5;color:#b7c4c5;max-width:36ch}
.wp-role{margin:12px 0 0;font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:#7f9293}
.wp-go{align-self:flex-start;margin-top:14px;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink);text-decoration:none;border-bottom:1px solid var(--cyan);padding-bottom:3px}
.wp-go:hover{color:var(--cyan)}
@media(max-width:800px){
  .wp{padding:8vh 16px 9vh}
  .wp-row{grid-template-columns:1fr!important;gap:14px;perspective:none}
  .wp-card{transform:none!important;grid-template-columns:1fr!important}
  .wp-bt .wp-card{grid-template-columns:36% 1fr!important;grid-template-rows:auto}
  .wp-bt .wp-fig{aspect-ratio:auto}
  .wp-line{font-size:12.5px}
}

/* =========================================================================
   06 — PRODUCTS: distinct systems inside one universe
   ========================================================================= */
/* Patrick Learning — the knowledge / construction world (dark chamber inside the cream page) */
.pl{position:relative;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);min-height:66vh;margin:0 0 9vh;background:#050912;color:var(--ink);overflow:clip;isolation:isolate;
  box-shadow:0 40px 90px rgba(6,12,22,.38);perspective:1400px}
.pl::before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(ellipse 50% 70% at 78% 40%,rgba(72,170,190,.2),transparent 70%),linear-gradient(180deg,#07101c,#04070d)}
.pl-tx{position:relative;z-index:3;padding:8vh 3.6vw;align-self:center}
.pl-loop{list-style:none;margin:26px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px 4px;align-items:center}
.pl-loop li{display:inline-flex;align-items:center;gap:8px;padding:8px 12px;border:1px solid rgba(131,218,221,.3);background:rgba(10,24,36,.5);font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:#d4e3e4}
.pl-loop li span{color:var(--cyan);font-size:12px}
.pl-loop li:not(:last-child)::after{content:"→";margin-left:8px;color:var(--cyan)}
.pl-flag{margin:22px 0 0;max-width:46ch;font-family:var(--serif);font-style:italic;font-size:clamp(16px,1.35vw,20px);line-height:1.42;color:rgba(241,241,235,.82)}
.pl-flag b{font-style:normal;font-weight:400;color:#f1f1eb}
.pl .pr-status{border-color:rgba(255,255,255,.24);color:#d4dcdd}
.pl-note{margin:12px 0 0;font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:#6f8384}
.pl-art{position:absolute;right:0;top:0;bottom:0;width:56%;z-index:1;transform-style:preserve-3d;transform:rotateY(calc(var(--tx,0) * -4deg)) rotateX(calc(var(--ty,0) * 3deg));transition:transform .4s cubic-bezier(.2,.7,.2,1)}
.pl-a1{position:absolute;right:0;top:0;height:100%;width:auto;max-width:none;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 34%,#000 100%),linear-gradient(180deg,transparent 0,#000 8%,#000 92%,transparent 100%);-webkit-mask-composite:source-in;
  mask-image:linear-gradient(90deg,transparent 0,#000 34%,#000 100%),linear-gradient(180deg,transparent 0,#000 8%,#000 92%,transparent 100%);mask-composite:intersect;transform:translateZ(0)}
.pl-a2{position:absolute;right:3%;bottom:-5%;width:24%;border:1px solid rgba(255,255,255,.16);box-shadow:0 30px 60px rgba(0,0,0,.6);transform:translateZ(70px) rotate(-3deg)}
@media(max-width:800px){
  .pl{grid-template-columns:1fr;min-height:0}
  .pl-art{position:relative;width:100%;height:52vw;right:auto}
  .pl-a1{width:100%;height:100%;object-fit:cover;object-position:50% 40%}
  .pl-a2{display:none}
  .pl-tx{padding:6vh 20px}
}
/* START USA — a structured starting architecture: the real cover standing in front of its own path */
.su{grid-template-columns:minmax(0,.62fr) minmax(0,1.38fr)}
@media(max-width:800px){.su{grid-template-columns:1fr}.su-cover{width:56vw}.su-path{gap:10px 0}}

/* =========================================================================
   07 — ABOUT: the human chamber (warmer; still inside the world)
   ========================================================================= */
.st{min-height:98svh}
.st-world{opacity:.5}
.warm .arch-d,.warm .arch-m{filter:hue-rotate(-138deg) saturate(.75)}
.st-photo{height:96svh;max-width:52vw;left:2vw;filter:none;-webkit-mask-image:none;mask-image:none}
.st-text{margin-left:50vw;padding:12vh 6vw 10vh 0;max-width:660px}
.st-tl{list-style:none;position:relative;margin:5vh 0 0;padding:0 0 0 24px}
.st-tl::before{content:"";position:absolute;left:5px;top:8px;bottom:8px;width:1px;background:linear-gradient(#d6aa6e,rgba(214,170,110,.08))}
.st-tl li{position:relative;display:flex;gap:18px;align-items:baseline;padding:0 0 15px}
.st-tl li::before{content:"";position:absolute;left:-23px;top:.6em;width:9px;height:9px;border-radius:50%;background:#0e0b08;border:1px solid #d6aa6e;box-shadow:0 0 14px rgba(214,170,110,.5)}
.st-tl b{flex:none;min-width:88px;font-weight:400;font-size:12px;letter-spacing:.22em;text-transform:uppercase;color:#d6aa6e}
.st-tl span{font-family:var(--serif);font-style:italic;font-size:clamp(16px,1.35vw,20px);line-height:1.3;color:rgba(241,241,235,.88)}
html.has-world .st-text::before{content:"";position:absolute;inset:0 -4vw 0 -6vw;z-index:-1;background:radial-gradient(ellipse 70% 62% at 50% 48%,rgba(8,7,6,.66),transparent 74%)}
@media(max-width:800px){.st-photo{position:relative;height:auto;width:78vw;max-width:none;left:auto}.st-text{margin-left:0;padding:6vh 20px 8vh}}

/* =========================================================================
   08 — CONTENT: idea objects on paper (no avatar)
   ========================================================================= */
.ct-head{grid-template-columns:1fr;margin-bottom:7vh}
.ct-head .h-title{font-size:clamp(46px,5.4vw,90px)}
.ct-grid{display:grid;grid-template-columns:1.05fr 1.35fr .9fr;gap:4vw;padding-top:5vh;border-top:1px solid rgba(23,27,28,.2);perspective:1400px}
.ct-k{margin:0;font-size:12px;letter-spacing:.22em;text-transform:uppercase;color:#58656a}
.ct-k b{font-weight:400;color:#1a7077;margin-right:12px}
.ct-say{margin:2.6vh 0 0;max-width:30ch;font-family:var(--serif);font-size:clamp(20px,1.85vw,29px);line-height:1.28;letter-spacing:-.02em;color:#10181b}
.ct-book{--tx:0;--ty:0;display:grid;grid-template-columns:clamp(120px,11vw,170px) minmax(0,1fr);gap:28px;align-items:end;margin-top:3vh;transform-style:preserve-3d}
.ct-cover{width:100%!important;transform:rotateY(-12deg) rotateX(2deg) translateZ(20px);box-shadow:-18px 28px 50px rgba(0,0,0,.3);transition:transform .45s cubic-bezier(.2,.7,.2,1)}
.ct-book:hover .ct-cover{transform:rotateY(-3deg) translateZ(34px)}
.ct-handle{margin:8px 0 0;font-family:var(--serif);font-weight:400;font-size:clamp(30px,3vw,48px);letter-spacing:-.045em;line-height:1;color:#10181b}
.ct-share .ct-desc{max-width:28ch}.ct-share .ct-go,.ct-bt .ct-go{display:inline-block;margin-top:14px}
.ct-share{padding:3vh 2vw;background:#dfd9cc;border:1px solid rgba(23,27,28,.12);box-shadow:0 24px 50px rgba(23,27,28,.14);transform:rotate(1.2deg)}
@media(max-width:800px){.ct-grid{grid-template-columns:1fr;gap:6vh}.ct-book{grid-template-columns:110px 1fr}.ct-share{transform:none}}

/* =========================================================================
   09 — CONTACT: the human at the centre of the resolved space
   ========================================================================= */
.cl{background:#060a12}
.cl-world{opacity:.9}
.cl-world .arch-d,.cl-world .arch-m{transform:scale(1.25);transform-origin:68% 42%}
.cl .arch-glow{background:radial-gradient(ellipse 34% 46% at 68% 46%,rgba(226,168,98,.22),transparent 72%),linear-gradient(180deg,rgba(6,10,18,.5) 0%,rgba(6,10,18,0) 26%,rgba(6,10,18,0) 72%,rgba(6,10,18,.6) 100%)}
.cl-stage{position:absolute;right:5vw;bottom:0;height:88svh;z-index:1;display:block}
.cl-plinth{position:absolute;left:-14%;right:-14%;bottom:-3%;height:16%;background:radial-gradient(ellipse at 50% 30%,rgba(0,0,0,.65),transparent 70%);filter:blur(10px)}
.cl-photo{position:relative;right:auto;bottom:auto;height:100%;width:auto;max-width:none;display:block;filter:drop-shadow(-4px 0 12px rgba(226,168,98,.28));-webkit-mask-image:none;mask-image:none}
html.has-world .cl-text::before{content:"";position:absolute;inset:-4vh -6vw;z-index:-1;background:radial-gradient(ellipse 66% 62% at 42% 48%,rgba(5,8,14,.68),transparent 76%)}
@media(max-width:800px){.cl{align-items:flex-start}.cl-stage{position:relative;right:auto;height:58svh;margin:8vh auto 0}.cl-text{padding:6vh 20px 10vh}}


/* the method list is carried by the flow layer; its duplicate in the handoff track would double it over the live background */
html.has-world .tm-method{display:none}

/* Builder: nothing else competes with Patrick once he is in the scene */
.phflow.is-motion .b-frag{display:none}
/* seats read as graphite architecture with a teal edge, not warm sand */
@media(max-width:800px){
  html.has-world .b-copy::before{inset:-4vh -6vw;background:radial-gradient(ellipse 80% 70% at 50% 60%,rgba(5,9,16,.7),rgba(5,9,16,0) 75%)}
}

/* START USA — the real toolkit as a standing architecture: cover in front, two real pages behind it in depth */
.su-p1{transform:translate3d(16%,-3%,-40px) rotateY(-18deg);z-index:2;opacity:.98}
.su-p2{transform:translate3d(32%,-6%,-140px) rotateY(-22deg);z-index:1;opacity:.96}
@media(max-width:800px){.su-stack{width:52vw;margin-bottom:18vw}}

/* fallback (no WebGL / reduced motion / weak device): a baked render of the very same 3D chamber, never a pasted cutout */
.scene-fb{position:absolute;inset:0;z-index:-1;overflow:hidden;background:#060a12}
.scene-fb img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 40%;display:block}
html.has-world .scene-fb{display:none}
.L-build .scene-fb::after,.st .scene-fb::after,.cl .scene-fb::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(5,9,16,.55),rgba(5,9,16,0) 55%)}
.st .scene-fb::after{background:linear-gradient(270deg,rgba(6,5,4,.62),rgba(6,5,4,0) 58%)}
.cl .scene-fb::after{background:linear-gradient(90deg,rgba(5,8,14,.66),rgba(5,8,14,0) 56%)}
@media(max-width:800px){.scene-fb img{object-position:50% 30%}.L-build .scene-fb::after,.st .scene-fb::after,.cl .scene-fb::after{background:linear-gradient(180deg,rgba(5,9,16,.7),rgba(5,9,16,.15) 55%,rgba(5,9,16,.6))}.cl .scene-fb::after{background:linear-gradient(180deg,rgba(5,9,16,.72),rgba(5,9,16,.42) 42%,rgba(5,9,16,.5) 68%,rgba(5,9,16,.68))}.cl .scene-fb img{object-position:50% 62%}.cl-title{text-shadow:0 1px 14px rgba(0,0,0,.5)}}
.st,.cl{isolation:isolate}

/* FINAL VISUAL PASS — START USA becomes a business-building SYSTEM in the same world: dark chamber, the real cover as an artifact on a lit floor,
   the ten chapters as plates receding along a path (depth = progression). Real material only. */
/* chapter path: ten plates, depth = progress */
@media(prefers-reduced-motion:reduce){.su-way{transform:none}.su-way li,.su-way li:nth-child(n+6){transform:none}}
@media(max-width:1000px){.su-way{grid-template-columns:repeat(2,minmax(0,1fr));transform:rotateX(8deg) rotateY(-4deg)}.su-way li::after{display:none}}
@media(max-width:800px){
}

/* FINAL VISUAL PASS — Selected Work: proof surfaces at different depths in the corridor (not a grid of equal cards).
   Operate = nearer and larger; built/helped = smaller nodes set back and staggered. Screenshots fade into the surface instead of being hard-cropped. */
@media(min-width:801px){
  .wp-row{align-items:start}
  .wp-bt .wp-row{grid-template-columns:repeat(3,1fr);gap:2vw;padding:0 3vw}
  .wp-bt .wp-card:nth-child(1){--ry:9deg;--tz:-30px;margin-top:3vh}
  .wp-bt .wp-card:nth-child(2){--ry:0deg;--tz:-70px;margin-top:0}
  .wp-bt .wp-card:nth-child(3){--ry:-9deg;--tz:-30px;margin-top:3vh}
  .wp-bt .wp-fig{aspect-ratio:16 / 7.2}
  .wp-bt .wp-line{font-size:12px}
  .wp-card{box-shadow:0 34px 60px rgba(0,0,0,.5),0 0 0 1px rgba(131,218,221,.1);transition:transform .5s cubic-bezier(.2,.7,.2,1),border-color .3s,box-shadow .4s}
  .wp-card::after{content:"";position:absolute;left:8%;right:8%;bottom:-26px;height:22px;background:radial-gradient(ellipse 50% 50% at 50% 50%,rgba(72,190,205,.32),transparent 70%);filter:blur(4px);pointer-events:none}
  .wp-card:hover{--tz:70px;box-shadow:0 44px 80px rgba(0,0,0,.6),0 0 0 1px rgba(131,218,221,.42)}
}
.wp-fig::after{content:"";position:absolute;inset:auto 0 0 0;height:34%;background:linear-gradient(180deg,transparent,rgba(9,17,30,.92));pointer-events:none}

/* FINAL VISUAL PASS — mobile with the world: Patrick gets his own band above the copy (the text never sits on his face) */
@media(max-width:800px){
  html.has-world .st-text{margin:0;padding:64svh 20px 80px}
  html.has-world .cl-text{margin:0;padding:60svh 20px 72px}
}
@media(min-width:601px) and (max-width:800px){
  html.has-world .st-text{padding:60svh 10vw 90px}
  html.has-world .cl-text{padding:56svh 10vw 90px}
}

/* tablet portrait with the world: same figure band as phones */
@media(min-width:801px) and (max-width:1100px) and (orientation:portrait){
  html.has-world .st-text{margin:0 auto;padding:58svh 8vw 90px;max-width:none}
  html.has-world .cl-text{margin:0 auto;padding:54svh 8vw 90px;max-width:none}
}
.su-sys .pr-media .prov{color:#8ea4a5}.su-sys .pr-media .prov b{color:#e6f0f0}

/* ==========================================================================================================================
   FINAL CORRECTION PASS — subtract, then compose.
   Builder + Contact are purpose-built composited scenes (real Patrick, real desk/console, room-matched grade) shown as plates;
   only About keeps a live figure. One dominant structure per chamber, no ghost words through the body, quiet transitions.
   ========================================================================================================================== */
/* plates are the scene in BOTH modes (the world renders the corridor between chambers) */
html.has-world .L-build .scene-fb,html.has-world .cl .scene-fb{display:block}
html.has-world .L-build .scene-fb{opacity:calc(min(1,var(--pp,1) * 3.2) * (1 - var(--m,0)));transform:scale(calc(1.07 - var(--pp,1) * .05));transform-origin:30% 55%;will-change:opacity,transform}
.L-build .scene-fb::after{background:linear-gradient(270deg,rgba(5,9,16,.6),rgba(5,9,16,0) 48%)}
html.has-world .cl{background:#070605}
html.has-world .cl .scene-fb::after{background:linear-gradient(90deg,rgba(7,6,5,.7),rgba(7,6,5,0) 52%)}
/* ghost outline words are gone (they fragmented the body); the stage list + the solid "Sistema." stay */
html .phflow .mw.mw-problema,html .phflow .mw.mw-processo{opacity:0!important;visibility:hidden}
html.has-world .b-fb{display:none}
/* shorter runway between Builder and the work */
.t-method{--len:1.6}.ho{--len:1.3}
/* Contact: composition beside the CTA; plate never becomes text background on phones */
@media(max-width:800px){
  .cl .scene-fb{bottom:auto;height:max(100svh,690px);-webkit-mask-image:linear-gradient(180deg,#000 76%,transparent 100%);mask-image:linear-gradient(180deg,#000 76%,transparent 100%)}
  html.has-world .cl-text{padding-top:71svh}
  .L-build .scene-fb::after{background:linear-gradient(180deg,rgba(5,9,16,.55),rgba(5,9,16,0) 32%,rgba(5,9,16,0) 62%,rgba(5,9,16,.62))}
}
@media(min-width:601px) and (max-width:800px){html.has-world .cl-text{padding-top:66svh}}
@media(min-width:801px) and (max-width:1100px) and (orientation:portrait){html.has-world .cl-text{padding-top:66svh}}
/* thresholds: the cream chambers dissolve out of / into the dark world instead of cutting */
.pr::before,.ct::before,.pr::after,.ct::after{content:"";position:absolute;left:0;right:0;height:11vh;pointer-events:none;z-index:1}
.pr::before{top:0;background:linear-gradient(180deg,#050b13,rgba(5,11,19,0))}
.pr::after{bottom:0;background:linear-gradient(0deg,#0a0806,rgba(10,8,6,0))}
.ct::before{top:0;background:linear-gradient(180deg,#0a0806,rgba(10,8,6,0))}
.ct::after{bottom:0;background:linear-gradient(0deg,#0a0806,rgba(10,8,6,0))}
/* Selected Work: Leci screenshot shown whole on its own paper, no mid-line crop */
.wp-bt .wp-card:nth-child(1) .wp-fig{background:#faf6f1;aspect-ratio:16 / 8.4}
.wp-bt .wp-card:nth-child(1) .wp-fig img{object-fit:contain;object-position:left top}
.wp-bt .wp-card:nth-child(1) .wp-fig::after{display:none}
/* Business Blueprint joins the dimensional system (layered plates on a dark ground) */
.bp-sys{position:relative;isolation:isolate;overflow:clip;margin:0 0 9vh;padding:8vh 3.6vw;border:0;color:#f1f1eb;background:#050912;box-shadow:0 40px 90px rgba(6,12,22,.38)}
.bp-sys::before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(ellipse 60% 70% at 78% 60%,rgba(72,170,190,.16),transparent 70%),linear-gradient(180deg,#08101b,#04070d)}
.bp-sys .pr-status{border-color:rgba(255,255,255,.24);color:#d4dcdd}
.bp-sys .bp{background:transparent;border:0;padding:0;perspective:1400px}
@media(max-width:800px){.bp-sys{padding:6vh 20px}.bp-sys .bp ol{grid-template-columns:1fr;transform:none}.bp-sys .bp li{transform:none}}
@media(prefers-reduced-motion:reduce){.bp-sys .bp ol,.bp-sys .bp li{transform:none}}

/* the solid word moves out of the desk (it crossed the console) and sits in the calm right column */
@media(min-width:801px){.mw-sistema{left:50vw;top:57vh}.mw-escala{top:80vh}}
/* no hairlines/curves drawn across Patrick (they crossed the face and shirt) */
html .phflow .b-rules,html .phflow .b-links{opacity:0!important;visibility:hidden}

/* Patrick Learning: the reference art is alive — slow camera drift, a pulse travelling down the teal shaft, evidence papers floating */
@media(prefers-reduced-motion:no-preference){
  .pl-a1{animation:plDrift 22s ease-in-out infinite alternate;transform-origin:60% 50%}
  .pl-a2{animation:plFloat 9s ease-in-out infinite alternate}
  .pl-art::after{content:"";position:absolute;left:42.6%;width:2px;height:26%;top:-26%;z-index:2;pointer-events:none;
    background:linear-gradient(180deg,transparent,rgba(160,250,255,.95),transparent);filter:blur(1px) drop-shadow(0 0 10px rgba(95,216,220,.9));animation:plPulse 5.5s linear infinite}
  .pl::before{animation:plBreath 8s ease-in-out infinite alternate}
}
@keyframes plDrift{from{transform:translateZ(0) scale(1.0) translate3d(0,0,0)}to{transform:translateZ(0) scale(1.07) translate3d(-1.2%,-1.4%,0)}}
@keyframes plFloat{from{transform:translateZ(70px) rotate(-3deg) translateY(0)}to{transform:translateZ(90px) rotate(-1.5deg) translateY(-14px)}}
@keyframes plPulse{from{top:-26%}to{top:112%}}
@keyframes plBreath{from{opacity:.75}to{opacity:1}}

/* contact mini form (prepares an email; nothing is sent by the page) */
.cl-form{display:grid;gap:14px;margin-top:22px;max-width:480px;padding:22px;border:1px solid rgba(131,218,221,.25);background:rgba(7,6,5,.72);backdrop-filter:blur(6px)}
.cl-form[hidden]{display:none}
.cl-form label{display:grid;gap:6px}
.cl-form label span{font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:#9fb3b4}
.cl-form input,.cl-form textarea{font:inherit;font-size:15px;color:#f1f1eb;background:rgba(255,255,255,.04);border:1px solid rgba(241,241,235,.2);padding:11px 12px;border-radius:0}
.cl-form input:focus,.cl-form textarea:focus{outline:2px solid var(--cyan);outline-offset:1px}
.cl-send{justify-self:start;display:inline-flex;gap:26px;align-items:center;padding:14px 20px;border:1px solid rgba(131,218,221,.55);background:transparent;color:#f1f1eb;font:inherit;font-size:14px;cursor:pointer}
.cl-send b{color:var(--cyan);font-weight:400}.cl-send:hover{background:rgba(131,218,221,.1)}
.cl-note{margin:0;font-size:12px;line-height:1.5;color:#8ea4a5}
.cl-hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.cl-status{margin:0;font-size:13px;color:#83dadd}.cl-status:empty{display:none}

/* About joins the plate system: purpose-made warm photograph, shown under the world like Builder and Contact */
html.has-world .st .scene-fb{display:block}
html.has-world .st{background:#0a0806}
html.has-world .st .scene-fb::after{background:linear-gradient(270deg,rgba(10,8,6,.72),rgba(10,8,6,0) 56%)}
html.has-world .st-photo-wrap,html.has-world .st-photo{visibility:hidden}

/* ==========================================================================================================================
   PATRICK SCENES — layered (owner correction 2026-09-30: digital/future Patrick, not a photo on a page).
   bg (the generated Patrick render) → mid (the SYSTEM built behind him: gates, path, orbits, real product UI) → person (same pixels,
   matte-cut, so the system passes BEHIND him) → fg. Base pair moves together; mid/fg drift opposite = real parallax, no edge slip.
   ========================================================================================================================== */
.ps{display:none}
@media(min-width:801px){
  html.has-world .ps{display:block;position:absolute;inset:0;overflow:hidden;opacity:0}
  html.has-world .scene-fb.ps-ok .ps{opacity:1;transition:opacity .5s}
  .ps-l{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 40%;max-width:none;display:block;will-change:transform}
  .ps-bg,.ps-per{transform:translate3d(calc(var(--wx,0) * -7px),calc(var(--wy,0) * -4px),0) scale(1.03)}
  .ps-mid{transform:translate3d(calc(var(--wx,0) * 15px),calc(var(--wy,0) * 8px),0) scale(1.05)}
  .ps-fg{transform:translate3d(calc(var(--wx,0) * 26px),calc(var(--wy,0) * 13px),0) scale(1.06)}
}
@media(prefers-reduced-motion:reduce){.ps-l{transform:none!important}}
/* About: a fuller biography fits in the column */
.st-tl li{padding-bottom:9px}
.st-tl b{min-width:104px}
.st-tl span{font-size:clamp(15px,1.2vw,18px)}
.st-copy{font-size:clamp(17px,1.4vw,21px)}
/* Contact: the human at the CENTER of the system — headline left, invitation right, Patrick between */
@media(min-width:1100px){
  .cl{justify-content:center}
  .cl-text{max-width:none;width:100%;padding:12vh 5vw 12vh;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,32vw) minmax(0,1fr);grid-template-rows:auto auto auto auto auto;column-gap:1.5vw;align-items:start}
  .cl-text > .h-eb{grid-column:1;grid-row:1}
  .cl-text > .cl-title{grid-column:1;grid-row:2 / span 4;font-size:clamp(38px,3.7vw,68px)}
  .cl-text > .cl-sup{grid-column:3;grid-row:2;margin-top:0;max-width:34ch}
  .cl-text > .cl-cta{grid-column:3;grid-row:3;justify-self:start}
  .cl-text > .cl-form{grid-column:3;grid-row:4}
  .cl-text > .cl-meta{grid-column:3;grid-row:5}
}
html.has-world .cl .scene-fb::after{background:linear-gradient(90deg,rgba(6,10,17,.78),rgba(6,10,17,0) 28%,rgba(6,10,17,0) 72%,rgba(6,10,17,.78))}
/* About: the amber path passes behind the copy column — keep the column legible */
html.has-world .st .scene-fb::after{background:linear-gradient(270deg,rgba(10,8,6,.92),rgba(10,8,6,.78) 36%,rgba(10,8,6,0) 64%)}

/* Builder: the supporting line stays legible over the system layer */
html.has-world .b-support{color:#dfe9ea;text-shadow:0 1px 14px rgba(5,9,16,.9)}
html.has-world .b-copy::before{background:radial-gradient(ellipse 62% 66% at 62% 50%,rgba(5,9,16,.78),rgba(5,9,16,0) 72%)}

/* Recovered POC-03, adapted to the Personal Home visual system. */
.ecosystem{
  --eco-ink:#edf1f2;--eco-muted:#9fb3b4;--eco-line:rgba(159,179,180,.3);--eco-accent:#83dadd;
  position:relative;isolation:isolate;aspect-ratio:16/10;min-height:640px;overflow:hidden;
  color:var(--eco-ink);background:radial-gradient(ellipse at 47% 58%,rgba(28,57,74,.5),transparent 47%),linear-gradient(125deg,#07111d 0%,#0a1724 54%,#07111c 100%);
}
.ecosystem::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;background:linear-gradient(90deg,transparent 49.9%,rgba(131,218,221,.075) 50%,transparent 50.1%),linear-gradient(0deg,transparent 49.9%,rgba(131,218,221,.045) 50%,transparent 50.1%);opacity:.55}
.eco-architecture{position:absolute;inset:7% 3%;z-index:0;pointer-events:none;perspective:900px;opacity:.5}
.eco-architecture i{position:absolute;inset:0;border:1px solid rgba(131,218,221,.12);transform:translateZ(calc(var(--ring,0)*-24px)) scale(calc(1 - var(--ring,0)*.07));clip-path:polygon(0 0,100% 0,100% 100%,0 100%)}
.eco-architecture i:nth-child(2){--ring:1}.eco-architecture i:nth-child(3){--ring:2}.eco-architecture i:nth-child(4){--ring:3}
.eco-halo{position:absolute;z-index:1;left:24%;top:30%;width:42%;height:60%;background:radial-gradient(ellipse,rgba(47,97,119,.28),transparent 68%);filter:blur(28px);pointer-events:none}
.eco-presence{position:absolute;z-index:2;left:14%;top:36%;width:37%;height:55%;background:radial-gradient(ellipse,rgba(47,97,119,.25),transparent 70%);filter:blur(12px);pointer-events:none}
.eco-shadow{position:absolute;z-index:3;left:4%;bottom:0;width:42%;height:44px;background:radial-gradient(ellipse,rgba(0,0,0,.55),transparent 72%);filter:blur(14px);pointer-events:none}
.eco-figure{position:absolute;z-index:4;left:23%;bottom:16%;width:25%;height:43%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;margin:0;border:1px solid rgba(131,218,221,.3);background:linear-gradient(145deg,rgba(16,34,48,.88),rgba(6,16,27,.94));box-shadow:0 32px 90px rgba(0,0,0,.38),inset 0 0 60px rgba(85,153,171,.08);transform:perspective(900px) rotateY(-8deg);pointer-events:none}
.eco-figure::before,.eco-figure::after{content:"";position:absolute;inset:10px;border:1px solid rgba(131,218,221,.12);pointer-events:none}.eco-figure::after{inset:20px;border-color:rgba(131,218,221,.07)}
.eco-figure>span{color:#e7f0ef;font-family:var(--serif,'Bodoni Moda',Georgia,serif);font-size:clamp(58px,10vw,150px);font-weight:400;line-height:1;letter-spacing:-.08em;text-shadow:0 0 34px rgba(131,218,221,.25)}
.eco-figure figcaption{margin:0;color:var(--eco-muted);font-size:clamp(12px,1vw,14px);letter-spacing:.2em;text-transform:uppercase;text-align:center;line-height:1.8}
.eco-links{position:absolute;inset:0;z-index:5;width:100%;height:100%;pointer-events:none}
.eco-links path{fill:none;stroke:var(--eco-line);stroke-width:1.4;vector-effect:non-scaling-stroke;stroke-dasharray:1;stroke-dashoffset:1}
.eco-links path.teal{stroke:rgba(131,218,221,.65)}.eco-links circle{fill:var(--eco-muted);opacity:0}.eco-links circle.teal{fill:var(--eco-accent)}.eco-links--tablet{display:none}
.eco-eyebrow{position:absolute;z-index:7;left:5%;top:7%;margin:0;color:var(--eco-muted);font-size:clamp(12px,1.15vw,16px);letter-spacing:.22em;text-transform:uppercase}
.eco-headline{position:absolute;z-index:7;left:4.8%;top:12%;margin:0;color:#f2f0ea;font-family:var(--serif,'Bodoni Moda',Georgia,'Times New Roman',serif);font-size:clamp(36px,4vw,58px);font-weight:500;line-height:1.08;letter-spacing:-.035em}
.eco-rule{position:absolute;z-index:7;left:5%;top:28%;width:82px;height:2px;background:var(--eco-accent);transform:scaleX(0);transform-origin:left}
.eco-nodes{position:absolute;z-index:8;left:68%;top:0;width:26%;height:100%;margin:0;padding:0;list-style:none}
.eco-node{position:absolute;left:0;width:100%;min-height:8.8%;box-sizing:border-box;border:1px solid rgba(131,218,221,.16);border-radius:5px;background:rgba(8,20,31,.72);backdrop-filter:blur(3px);transition:background .25s ease,border-color .25s ease}
.eco-node:nth-child(1){top:15%}.eco-node:nth-child(2){top:28%}.eco-node:nth-child(3){top:62%}.eco-node:nth-child(4){top:75%}
.eco-node a{display:block;min-height:100%;padding:clamp(10px,.95vw,15px) clamp(12px,1.25vw,20px);color:inherit;text-decoration:none}
.eco-node h3{margin:0;font-family:var(--mono,ui-monospace,SFMono-Regular,Menlo,monospace);font-size:clamp(12px,1.15vw,17px);font-weight:500;letter-spacing:.02em;line-height:1.35}
.eco-node p{margin:5px 0 0;color:var(--eco-muted);font-size:clamp(12px,.95vw,14px);line-height:1.4}
.eco-node--command{border-color:rgba(131,218,221,.36)}
.eco-node:hover,.eco-node:focus-within{background:rgba(21,43,55,.9);border-color:rgba(131,218,221,.55)}
.eco-node a:focus-visible{outline:2px solid var(--eco-accent);outline-offset:3px}
.motion .ecosystem:not(.is-in) .eco-eyebrow,.motion .ecosystem:not(.is-in) .eco-figure,.motion .ecosystem:not(.is-in) .eco-node{opacity:0}
.ecosystem.is-in .eco-eyebrow{animation:eco-fade-in .55s ease-out both}
.ecosystem.is-in .eco-figure{animation:eco-rise-in .8s cubic-bezier(.22,1,.36,1) both}
.ecosystem.is-in .eco-rule{animation:eco-rule-in .5s ease-out .25s both}
.ecosystem.is-in .eco-node{animation:eco-rise-in .65s cubic-bezier(.22,1,.36,1) calc(.2s + var(--i)*.09s) both}
.ecosystem.is-in .eco-links path{animation:eco-draw-in .85s ease-out calc(.35s + var(--i)*.08s) both}
.ecosystem.is-in .eco-links path:nth-of-type(1){--i:0}.ecosystem.is-in .eco-links path:nth-of-type(2){--i:1}.ecosystem.is-in .eco-links path:nth-of-type(3){--i:2}.ecosystem.is-in .eco-links path:nth-of-type(4){--i:3}
.ecosystem.is-in .eco-links circle{animation:eco-fade-in .35s ease-out calc(1s + var(--i)*.08s) both}
.ecosystem.is-in .eco-links circle:nth-of-type(1){--i:0}.ecosystem.is-in .eco-links circle:nth-of-type(2){--i:1}.ecosystem.is-in .eco-links circle:nth-of-type(3){--i:2}.ecosystem.is-in .eco-links circle:nth-of-type(4){--i:3}
@keyframes eco-fade-in{to{opacity:1}}@keyframes eco-rise-in{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:translateY(0)}}@keyframes eco-rule-in{to{transform:scaleX(1)}}@keyframes eco-draw-in{to{stroke-dashoffset:0}}
@media(max-width:1023px){.ecosystem{aspect-ratio:auto;min-height:640px}.eco-figure{left:17%;bottom:16%;width:32%;height:40%}.eco-presence{left:8%;width:48%;height:60%}.eco-nodes{left:64%;width:32%}.eco-links--desktop{display:none}.eco-links--tablet{display:block}}
@media(max-width:767px){
  .ecosystem{display:flex;flex-direction:column;align-items:stretch;aspect-ratio:auto;min-height:0;padding:64px 20px 42px;overflow:hidden}
  .eco-architecture{inset:3% 0;opacity:.28}.eco-halo{left:10%;top:24%;width:80%;height:34%}
  .eco-eyebrow,.eco-headline,.eco-rule,.eco-figure,.eco-nodes{position:relative;left:auto;top:auto;bottom:auto}
  .eco-eyebrow{order:1}.eco-headline{order:2;margin-top:14px;font-size:clamp(36px,10vw,48px)}.eco-rule{order:3;width:72px;margin-top:22px}
  .eco-figure{position:relative;order:4;left:auto;bottom:auto;width:100%;height:230px;margin:22px auto 0;transform:none}.eco-figure>span{font-size:112px}.eco-figure figcaption{font-size:12px}.eco-presence{left:10%;top:26%;width:80%;height:27%;opacity:.12;filter:blur(10px)}.eco-shadow{left:15%;width:70%;height:28px}
  .eco-links{display:none}.eco-nodes{order:5;display:grid;width:100%;height:auto;gap:10px;margin-top:26px}
  .eco-node,.eco-node:nth-child(n){position:relative;inset:auto;min-height:0;border-left:2px solid rgba(159,179,180,.38);border-radius:2px}
  .eco-node--command{border-left-color:var(--eco-accent)}.eco-node a{padding:13px 14px}.eco-node h3{font-size:13px}.eco-node p{font-size:12px}
}
@media(prefers-reduced-motion:reduce){.ecosystem *, .ecosystem *::before,.ecosystem *::after{animation:none!important;transition:none!important}.ecosystem .eco-eyebrow,.ecosystem .eco-figure,.ecosystem .eco-node{opacity:1!important;transform:none!important}.ecosystem .eco-rule{transform:scaleX(1)!important}.ecosystem .eco-links path{stroke-dashoffset:0!important}.ecosystem .eco-links circle{opacity:1!important}}

/* Owner correction: preserve the existing continuous world, shorten its chambers, and use Wave 0 scenes as portals. */
.st-journey{position:relative;min-height:82svh;background:radial-gradient(ellipse at 72% 50%,rgba(26,83,101,.28),transparent 52%),linear-gradient(120deg,#060a12,#0a111a 54%,#060a12);overflow:hidden;isolation:isolate}
.st-journey .scene-fb{position:absolute;inset:0 49% 0 0;overflow:visible;opacity:.84;mask-image:linear-gradient(90deg,#000 0%,#000 72%,transparent 100%)}
.st-journey .scene-fb picture{position:absolute;inset:0;perspective:1200px}
.st-journey .scene-fb picture img{width:100%;height:100%;object-fit:cover;object-position:center 32%;transform:perspective(1200px) rotateY(8deg) translateZ(24px);filter:saturate(.8) brightness(.74)}
.st-journey .scene-fb .ps{display:none}
.st-journey .st-text{position:relative;z-index:2;margin-left:48vw;padding:13vh 7vw 10vh 0;max-width:760px}
.st-journey .st-title{margin-top:16px;font-size:clamp(38px,4.2vw,64px);line-height:1}
.st-journey .st-copy{margin-top:18px;font-family:var(--sans,Arial,sans-serif);font-size:clamp(15px,1.25vw,18px);line-height:1.55}
.st-journey .st-copy + .st-copy{margin-top:10px}
.st-journey::before,.st-journey::after{content:"";position:absolute;pointer-events:none;z-index:1;border:1px solid rgba(131,218,221,.18);transform:perspective(1200px) rotateY(-13deg);}
.st-journey::before{inset:8% 5% 12% 4%;clip-path:polygon(0 0,100% 8%,100% 90%,0 100%)}
.st-journey::after{inset:15% 9% 19% 0;border-color:rgba(131,218,221,.08);transform:perspective(1200px) rotateY(-13deg) translateZ(-50px)}
.st-world-path{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;margin:28px 0 0;padding:18px 0 0;border-top:1px solid rgba(131,218,221,.26);list-style:none}
.st-world-path li{display:flex;flex-direction:column;gap:7px;padding:0 10px;border:0;border-left:1px solid rgba(131,218,221,.2);font-size:12px;color:#d6e0e0}
.st-world-path li:first-child{padding-left:0;border-left:0}
.st-world-path li b{font-size:12px;font-weight:500;color:#83dadd;letter-spacing:.06em}
.st-world-path li span{font-size:clamp(13px,1vw,15px);line-height:1.5;letter-spacing:.02em}
.st-journey .st-sign{margin-top:18px;font-size:15px}
.wp{padding:8vh 5vw 9vh;background:transparent;perspective:1500px}
.wp-in{gap:0}
.wp-collab .wp-lab{margin:0 0 18px;font-size:12px;letter-spacing:.22em;text-transform:uppercase;color:#9fb3b4}
.wp-collab .wp-lab b{margin-right:14px;color:#83dadd;font-weight:400}
.wp-collab .wp-row{position:relative;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;align-items:center;padding:0 2vw}
.wp-collab .wp-row::before{content:"";position:absolute;left:8%;right:8%;top:44%;height:1px;background:linear-gradient(90deg,transparent,rgba(131,218,221,.48),rgba(131,218,221,.18),transparent);box-shadow:0 0 22px rgba(65,183,198,.2);pointer-events:none}
.wp-collab .wp-card{display:block;min-width:0;padding:0;border:0;background:none;box-shadow:none;transform:perspective(1300px) rotateY(var(--ry)) translateZ(var(--tz));transition:transform .55s cubic-bezier(.2,.7,.2,1),opacity .4s}
.wp-collab .wp-card::after{display:none}
.wp-collab .wp-card:nth-child(1){--ry:11deg;--tz:0px;margin-top:2vh}
.wp-collab .wp-card:nth-child(2){--ry:-3deg;--tz:68px;margin-top:-5vh}
.wp-collab .wp-card:nth-child(3){--ry:-12deg;--tz:12px;margin-top:3vh}
.wp-collab .wp-fig{aspect-ratio:16/8.5;border:1px solid rgba(131,218,221,.3);clip-path:polygon(0 4%,100% 0,98% 96%,3% 100%);background:linear-gradient(140deg,rgba(23,53,68,.75),rgba(5,12,21,.92));box-shadow:0 28px 70px rgba(0,0,0,.4),0 0 32px rgba(55,177,194,.08);transform:translateZ(24px)}
.wp-collab .wp-fig img{object-fit:contain;filter:saturate(.78) contrast(1.04);transition:transform .7s ease,filter .7s ease}
.wp-collab .wp-card:hover .wp-fig img{transform:scale(1.035);filter:saturate(.95) contrast(1.04)}
.wp-collab .wp-fig::after{height:32%;background:linear-gradient(180deg,transparent 20%,rgba(5,12,21,.5))}
.wp-collab .wp-tx{padding:12px 2px 0;transform:translateZ(36px)}
.wp-collab .wp-kick{font-size:12px;letter-spacing:.18em;color:#83dadd}
.wp-collab .wp-name{font-family:var(--sans,Arial,sans-serif);font-size:clamp(16px,1.5vw,22px);letter-spacing:.01em}
.wp-collab .wp-role{font-size:12px;line-height:1.4;color:#afbec1}
.ecosystem{min-height:760px;aspect-ratio:16/9;background:radial-gradient(ellipse at 53% 53%,rgba(33,96,117,.38),transparent 53%),linear-gradient(110deg,#060c16,#0a1724 56%,#050b13)}
.eco-figure{left:27%;bottom:12%;width:24%;height:72%;border:0;background:none;box-shadow:none;overflow:visible}
.eco-figure::before{inset:-6%;border:1px solid rgba(131,218,221,.3);transform:perspective(1000px) rotateY(18deg) translateZ(-30px)}
.eco-figure::after{inset:-12%;border:1px solid rgba(131,218,221,.12);transform:perspective(1000px) rotateY(18deg) translateZ(-70px)}
.eco-figure>span{display:none}
.eco-figure img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 24%;transform:perspective(1100px) rotateY(-8deg) translateZ(34px);filter:drop-shadow(0 28px 42px rgba(0,0,0,.5));mask-image:linear-gradient(180deg,#000 0%,#000 74%,transparent 100%)}
.eco-figure figcaption{position:absolute;left:-10%;bottom:-8%;z-index:2;padding:10px 18px;background:rgba(5,13,23,.82);border-left:1px solid #83dadd;text-align:left}
.eco-nodes{left:61%;width:34%;display:grid;grid-template-rows:repeat(4,1fr);gap:18px;height:80%;top:12%;perspective:1200px}
.eco-node,.eco-node:nth-child(n){position:relative;inset:auto;min-height:0;border:0;border-radius:0;background:none;backdrop-filter:none;transform:perspective(900px) rotateY(-16deg) translateZ(calc(var(--i)*5px));overflow:visible}
.eco-node a{position:relative;display:grid;grid-template-columns:36% 1fr;gap:18px;align-items:center;height:100%;padding:0;color:inherit;background:linear-gradient(90deg,rgba(7,16,27,.05),rgba(7,16,27,.92) 37%);text-decoration:none}
.eco-node a>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 45%;opacity:.34;filter:blur(2px) saturate(.8);mask-image:linear-gradient(90deg,#000 0%,rgba(0,0,0,.72) 34%,transparent 82%);transform:translateZ(0);transition:transform .55s ease,opacity .4s ease}
.eco-portal-copy{position:relative;z-index:1;grid-column:2;padding:14px 18px 14px 0;border-top:1px solid rgba(131,218,221,.4);border-bottom:1px solid rgba(131,218,221,.16);background:linear-gradient(90deg,rgba(7,16,27,.93),rgba(7,16,27,.35))}
.eco-node h3{font-family:var(--sans,Arial,sans-serif);font-size:clamp(12px,1.05vw,15px);letter-spacing:.12em}
.eco-node p{margin-top:5px;font-size:12px}
.eco-portal-copy>b{display:inline-block;margin-top:9px;color:#83dadd;font-size:12px;letter-spacing:.16em;text-transform:uppercase;font-weight:400}
.eco-portal-copy>b span{font-size:13px}
.eco-node:hover,.eco-node:focus-within{background:none;border-color:transparent;transform:perspective(900px) rotateY(-10deg) translateZ(26px)}
.eco-node:hover a>img,.eco-node:focus-within a>img{opacity:.72;transform:scale(1.025)}
.eco-links{z-index:2;opacity:.84}
.dc-world{--len:1.4;position:relative;min-height:78svh;overflow:hidden;isolation:isolate;padding:9vh 7vw;background:radial-gradient(ellipse at 64% 47%,rgba(27,101,123,.28),transparent 50%),#060b13;color:var(--ink)}
.dc-world::before{content:"";position:absolute;inset:8% 6%;border:1px solid rgba(131,218,221,.18);transform:perspective(1200px) rotateY(-9deg) rotateX(2deg);pointer-events:none}
.dc-world-art{position:absolute;z-index:0;left:4%;top:7%;height:90%;width:auto;max-width:48%;object-fit:contain;opacity:.56;mask-image:linear-gradient(180deg,#000 0%,#000 72%,transparent 100%);transform:perspective(1200px) rotateY(8deg) translateZ(-20px)}
.dc-world-portal{position:absolute;z-index:1;right:4%;top:10%;width:50%;height:80%;object-fit:cover;object-position:center;opacity:.66;mask-image:linear-gradient(90deg,transparent 0%,#000 24%,#000 100%);transform:perspective(1100px) rotateY(-12deg) translateZ(15px);filter:saturate(.83)}
.dc-world-copy{position:relative;z-index:3;width:min(43%,570px);padding:5vh 0 4vh}
.dc-world-copy .runhead{position:relative;left:auto;top:auto;z-index:auto;margin:0 0 10vh;color:#9fb3b4}
.dc-world-copy h2{margin:0;font-family:var(--serif,'Bodoni Moda',Georgia,serif);font-size:clamp(40px,5vw,72px);font-weight:400;line-height:.96;letter-spacing:-.045em}
.dc-world-copy>p:not(.runhead){max-width:32ch;margin:18px 0 0;font-size:clamp(15px,1.35vw,19px);line-height:1.55;color:#cfdbde}
.dc-world-copy .dc-status{font-size:12px!important;letter-spacing:.12em;text-transform:uppercase;color:#a7b9bc!important}
.dc-world-actions{display:flex;flex-wrap:wrap;align-items:center;gap:14px 22px;margin-top:22px}
.dc-world-actions a{color:#cfe5e5;text-decoration:none}
.dc-world-actions a:focus-visible{outline:2px solid #83dadd;outline-offset:4px}
.dc-world-actions .dc-cta{padding:11px 14px;border:1px solid rgba(131,218,221,.5);font-size:13px}
.dc-world-actions .dc-login,.dc-world-actions .dc-interest{font-size:12px;color:#a9c5c8}
.dc-world-ui{position:absolute;z-index:4;right:8%;bottom:9%;width:min(48%,700px);margin:0;transform:perspective(1100px) rotateY(-11deg) rotateX(2deg) translateZ(54px);filter:drop-shadow(0 30px 50px rgba(0,0,0,.55))}
.dc-world-ui .shot{border-color:rgba(131,218,221,.42);background:#09131d;box-shadow:0 0 45px rgba(63,191,203,.13)}
.dc-world-ui .bar{display:none}
.dc-world-ui figcaption{margin-top:8px;font-size:12px;letter-spacing:.15em;text-transform:uppercase;color:#adbec0;text-align:right}
.pr-world{position:relative;min-height:90svh;padding:0;overflow:hidden;background:radial-gradient(ellipse at 56% 52%,rgba(39,103,119,.25),transparent 55%),linear-gradient(110deg,#050b13,#0a1721 56%,#050b13);color:var(--ink)}
.pl-world{position:relative;min-height:90svh;overflow:hidden;isolation:isolate;perspective:1400px}
.pl-world::before{content:"";position:absolute;left:12%;right:12%;top:6%;bottom:4%;border:1px solid rgba(131,218,221,.2);transform:perspective(1000px) rotateY(12deg);box-shadow:inset 0 0 90px rgba(58,158,174,.08);pointer-events:none}
.pl-world img{position:absolute;object-fit:cover;filter:saturate(.85);transition:transform .8s cubic-bezier(.2,.7,.2,1)}
.pl-world-back{left:10%;top:5%;height:90%;width:auto;opacity:.34;transform:perspective(1300px) rotateY(12deg) translateZ(-90px)}
.pl-world-mid{left:23%;top:7%;height:88%;width:auto;opacity:.72;transform:perspective(1300px) rotateY(8deg) translateZ(-25px);mask-image:linear-gradient(180deg,#000 0%,#000 78%,transparent)}
.pl-world-front{left:45%;top:12%;height:74%;width:auto;max-width:38%;opacity:.8;transform:perspective(1300px) rotateY(-9deg) translateZ(45px);box-shadow:0 35px 80px rgba(0,0,0,.4)}
.pl-world-signal{right:7%;bottom:8%;width:20%;height:auto;opacity:.4;transform:perspective(1000px) rotateY(-14deg) translateZ(20px)}
.pl-world-copy{position:absolute;z-index:2;left:8%;top:20%;width:min(38%,480px);padding:28px;background:linear-gradient(110deg,rgba(5,11,18,.88),rgba(5,11,18,.4));border-left:1px solid #83dadd;transform:translateZ(70px)}
.pl-world-copy .h-eb{font-size:12px;letter-spacing:.18em;color:#9fb3b4}
.pl-world-copy h2{margin:18px 0 0;font:400 clamp(36px,4.4vw,62px)/.98 var(--serif,'Bodoni Moda',Georgia,serif);letter-spacing:-.04em}
.pl-world-copy>p:not(.h-eb){max-width:38ch;margin:15px 0 0;font-size:14px;line-height:1.55;color:#cad7d9}
.pl-world-copy .pr-status{margin-top:14px;padding:6px 10px;border-color:rgba(131,218,221,.3);font-size:12px;color:#c8d9db}
.pl-world-copy .pr-status::before{background:#d6aa6e}
.pl-world-start{font-size:12px!important;color:#9fb3b4!important}
.pl-world-copy>a{display:inline-block;margin-top:14px;color:#83dadd;text-decoration:none;font-size:12px;letter-spacing:.07em}
.pl-world-copy>a:focus-visible{outline:2px solid #83dadd;outline-offset:4px}
.ct-world{padding:8vh 5vw;background:radial-gradient(ellipse at 76% 42%,rgba(37,97,112,.22),transparent 50%),#080e17;color:var(--ink)}
.ct-world .ct-grid{grid-template-columns:1fr 1fr 1fr;gap:3vw;padding-top:3vh;border-color:rgba(131,218,221,.2)}
.ct-world .ct-col{padding:0 1.5vw;border-left:1px solid rgba(131,218,221,.18)}
.ct-world .ct-col:first-child{border-left:0;padding-left:0}
.ct-world .ct-k,.ct-world .ct-meta{color:#83dadd}
.ct-world .ct-say,.ct-world .ct-desc,.ct-world .ct-title,.ct-world .ct-handle{color:#e4ecec}
.ct-world .cl-path{margin:14px 0 0}
.ct-world .pr-path-btn{color:#e4ecec;border-color:rgba(131,218,221,.48)}
.ct-world .pr-path-btn span{color:#9fb3b4}
.ct-world .pr-path-btn b{color:#83dadd}
.cl .cl-path{margin:14px 0 0}
.cl .pr-path-btn{color:#e4ecec;border-color:rgba(131,218,221,.48)}
.cl .pr-path-btn span{color:#9fb3b4}
.cl .pr-path-btn b{color:#83dadd}
.cl{min-height:82svh;background:#060b13}
.cl-text{padding:10vh 6vw 10vh}
.cl-title{font-size:clamp(38px,4.6vw,70px)}
.cl-sup{font-size:clamp(16px,1.3vw,20px)}

@media(max-width:800px){
  .st-journey{min-height:0;padding-top:0}
  .st-journey .scene-fb{position:absolute;inset:0 18% 30% 0;min-height:0;max-height:none;overflow:hidden;mask-image:linear-gradient(180deg,#000 0%,transparent 100%)}
  .st-journey .scene-fb picture img{width:100%;height:100%;object-fit:cover;object-position:45% 35%;transform:perspective(900px) rotateY(5deg)}
  .st-journey .st-text{margin:0;padding:230px 22px 44px;max-width:none}
  .st-journey .st-title{font-size:clamp(34px,9vw,46px)}
  .st-journey .st-copy{font-size:15px}
  .st-journey::before{inset:5% 4% 9% 1%}
  .st-journey::after{inset:10% 9% 15% -5%}
  .st-world-path{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:16px;margin-top:22px}
  .st-world-path li:nth-child(3){border-left:0;padding-left:0}
  .wp{padding:52px 20px 48px}
  .wp-collab .wp-row{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:10px;padding:8px 8px 22px;perspective:900px}
  .wp-collab .wp-row::before{left:12%;right:12%;top:36%}
  .wp-collab .wp-card{flex:0 0 min(78vw,310px);scroll-snap-align:center;transform:perspective(900px) rotateY(-5deg) translateZ(8px)}
  .wp-collab .wp-card:nth-child(2){transform:perspective(900px) rotateY(0) translateZ(26px);margin-top:0}
  .wp-collab .wp-card:nth-child(3){transform:perspective(900px) rotateY(5deg) translateZ(8px)}
  .wp-collab .wp-tx{padding-top:10px}
  .ecosystem{min-height:0;aspect-ratio:auto;padding:54px 18px 40px}
  .eco-architecture{inset:1% 0;opacity:.24}
  .eco-eyebrow,.eco-headline,.eco-rule,.eco-figure,.eco-nodes{position:relative;left:auto;top:auto;bottom:auto}
  .eco-eyebrow{order:1}.eco-headline{order:2;margin-top:10px;font-size:clamp(30px,8vw,40px)}.eco-rule{order:3;margin-top:14px}
  .eco-figure{order:4;width:min(74%,280px);height:330px;margin:20px auto 10px;transform:none}
  .eco-figure img{transform:perspective(800px) rotateY(-4deg) translateZ(18px)}
  .eco-figure figcaption{left:-16%;bottom:-2%;font-size:12px}
  .eco-nodes{order:5;display:flex;flex-direction:column;width:100%;height:auto;gap:8px;margin-top:22px}
  .eco-node,.eco-node:nth-child(n){min-height:82px;transform:none}
  .eco-node a{grid-template-columns:36% 1fr}
  .eco-portal-copy{padding:10px 6px 10px 0}
  .eco-node h3{font-size:12px}.eco-node p{font-size:12px}.eco-portal-copy>b{font-size:12px;margin-top:5px}
  .eco-links{display:none}
  .dc-world{min-height:0;padding:48px 22px 42px}
  .dc-world::before{inset:16px 10px;transform:none}
  .dc-world-art{left:auto;right:-8%;top:2%;height:54%;max-width:58%;opacity:.4}
  .dc-world-portal{right:-8%;top:6%;width:82%;height:52%;opacity:.4;transform:perspective(900px) rotateY(-7deg)}
  .dc-world-copy{width:100%;padding:0 0 54vw}
  .dc-world-copy .runhead{margin-bottom:20px;font-size:12px}
  .dc-world-copy h2{font-size:clamp(36px,10vw,48px)}
  .dc-world-copy>p:not(.runhead){max-width:34ch;font-size:14px}
  .dc-world-ui{right:3%;bottom:38px;width:88%;transform:perspective(900px) rotateY(-7deg) translateZ(30px)}
  .dc-world-actions{gap:12px 16px}
  .dc-world-actions .dc-cta{font-size:12px}
  .pr-world{min-height:0;padding:0}
  .pl-world{min-height:660px}
  .pl-world::before{left:6%;right:5%;top:4%;bottom:3%;transform:none}
  .pl-world-back{left:-8%;top:6%;height:72%;opacity:.25}
  .pl-world-mid{left:12%;top:6%;height:72%;opacity:.5}
  .pl-world-front{left:auto;right:2%;top:22%;height:50%;max-width:55%;opacity:.72}
  .pl-world-signal{right:3%;bottom:4%;width:32%;opacity:.3}
  .pl-world-copy{left:8%;top:10%;width:84%;padding:18px}
  .pl-world-copy h2{font-size:clamp(32px,9vw,44px)}
  .pl-world-copy>p:not(.h-eb){max-width:32ch;font-size:13px}
  .ct-world{padding:50px 22px}
  .ct-world .ct-grid{grid-template-columns:1fr;gap:24px;padding-top:22px}
  .ct-world .ct-col{padding:0 0 18px;border-left:0;border-bottom:1px solid rgba(131,218,221,.18)}
  .ct-world .ct-col:first-child{padding-left:0}
  .cl{min-height:0}
  .cl-text{padding:60px 22px 64px}
  .cl-title{font-size:clamp(36px,10vw,48px)}
}
@media(prefers-reduced-motion:reduce){
  .wp-collab .wp-card,.wp-collab .wp-fig img,.eco-node,.eco-node a>img,.pl-world img{transition:none!important;transform:none!important}
}

/* Sequence endpoints: finish the method climax before the next chapter enters. */
.tm-list li:nth-child(1){--show:min(clamp(0,(var(--p) - .02)/.04,1),clamp(0,(.24 - var(--p))/.04,1))}
.tm-list li:nth-child(5){--show:min(clamp(0,(var(--p) - .79)/.04,1),clamp(0,(.87 - var(--p))/.04,1))}
.tm-intro .eb{--at:.86}
.tm-intro h2{--at:.89}
.tm-intro .sup{--at:.92}

.tm-list li:nth-child(1){--show:min(clamp(0,(var(--p) - .02)/.04,1),clamp(0,(.24 - var(--p))/.04,1))}
.tm-list li:nth-child(5){--show:min(clamp(0,(var(--p) - .79)/.04,1),clamp(0,(.87 - var(--p))/.04,1))}
.tm-intro .eb{--at:.86}
.tm-intro h2{--at:.89}
.tm-intro .sup{--at:.92}

/* Editorial simplification: same spatial world, fewer simultaneous focal points. */
.phflow.is-motion .t-method{margin-top:0}
.t-method{--len:1.25}
.ho{--len:1.2}
.phflow.is-motion .L-method{background:radial-gradient(ellipse at 50% 50%,rgba(62,142,150,.08),transparent 48%)}
.tm-method{display:block;padding:0}
.tm-list-wrap{position:absolute;left:12vw;right:10vw;top:38%;padding:0}
.tm-eyebrow,.tm-spine,.tm-text{display:none}
.tm-list{position:relative;height:1.35em}
.tm-list li,.tm-list li.keep{position:absolute;inset:0 auto auto 0;display:block;--show:0;opacity:var(--show);filter:none;transform:translate3d(0,calc((1 - var(--show))*12px),0);transition:opacity .25s ease,transform .25s ease}
.tm-list li:nth-child(1){--show:clamp(0,(.25 - var(--p))/.04,1)}
.tm-list li:nth-child(2){--show:min(clamp(0,(var(--p) - .22)/.04,1),clamp(0,(.45 - var(--p))/.04,1))}
.tm-list li:nth-child(3){--show:min(clamp(0,(var(--p) - .42)/.04,1),clamp(0,(.65 - var(--p))/.04,1))}
.tm-list li:nth-child(4){--show:min(clamp(0,(var(--p) - .62)/.04,1),clamp(0,(.82 - var(--p))/.04,1))}
.tm-list li:nth-child(5){--show:clamp(0,(var(--p) - .79)/.04,1)}
.tm-list .idx{display:none}
.tm-w{font-size:clamp(44px,5.2vw,76px);line-height:1.1;white-space:normal}
.tm-list li.keep{--k:0!important;transform:translateZ(0)!important}
.tm-list li.keep .tm-w{color:var(--ink);-webkit-text-stroke:0}
.tm-bridge{top:18vh;left:12vw;opacity:calc(1 - clamp(0,(var(--p) - .7)/.18,1));font-size:12px}
.tm-intro{grid-template-columns:1fr;align-content:end;gap:2vh;padding:0 12vw 17vh}
.tm-intro .eb{grid-column:auto}
.tm-intro h2{font-size:clamp(40px,4.6vw,68px)}
.tm-intro .sup{max-width:48ch;font-size:14px}
.motion .t-method{margin-top:0;z-index:3}
.st-journey{min-height:76svh}
.st-journey .st-text{padding-top:10vh;padding-bottom:8vh}
.st-journey .st-title{font-size:clamp(36px,3.5vw,54px)}
.st-journey .st-copy{margin-top:12px;font-size:clamp(14px,1.08vw,16px);line-height:1.5}
.st-world-path{margin-top:22px;gap:10px}
.st-world-path li{opacity:.76}
.wp{padding-top:5vh;padding-bottom:6vh}
.wp-collab .wp-lab{margin-bottom:12px}
.wp-collab .wp-card{opacity:.54;transform:perspective(1300px) rotateY(var(--ry)) translateZ(0) scale(.92)}
.wp-collab .wp-card:nth-child(2){opacity:1;transform:perspective(1300px) rotateY(-3deg) translateZ(30px) scale(1)}
.wp-collab .wp-card:hover,.wp-collab .wp-card:focus-within{opacity:1}
.wp-collab .wp-fig{box-shadow:0 18px 44px rgba(0,0,0,.32),0 0 20px rgba(55,177,194,.06)}
.ecosystem{min-height:680px}
.eco-figure{left:34%;width:12%;height:46%;bottom:12%;opacity:.42}
.eco-figure::before{inset:-3%;opacity:.55}
.eco-figure::after{display:none}
.eco-figure figcaption{font-size:12px;padding:7px 12px}
.eco-nodes{top:20%;height:64%;gap:9px}
.eco-node a>img{opacity:.4}
.eco-node:not(.eco-portal--1) a>img{opacity:.22}
.eco-node:not(.eco-portal--1) .eco-portal-copy{opacity:.72}
.eco-node--command .eco-portal-copy{border-color:rgba(131,218,221,.28)}
.eco-links{opacity:.48}
.dc-world{--len:1.25;min-height:72svh;padding-top:7vh;padding-bottom:7vh;background:radial-gradient(ellipse at 70% 46%,rgba(27,101,123,.22),transparent 48%),#060b13}
.dc-world::before{inset:11% 8%;opacity:.55}
.dc-world-art{left:2%;top:12%;height:74%;max-width:27%;opacity:.13;mask-image:linear-gradient(180deg,transparent,#000 22%,#000 72%,transparent)}
.dc-world-portal{right:4%;top:11%;width:55%;height:72%;opacity:.7;mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.65) 18%,#000 100%)}
.dc-world-copy{width:min(38%,490px);padding:4vh 0 3vh}
.dc-world-copy .runhead{margin-bottom:6vh}
.dc-world-copy h2{font-size:clamp(38px,4.4vw,64px)}
.dc-world-copy>p:not(.runhead){max-width:29ch;font-size:15px}
.dc-world-copy .dc-status{margin-top:10px!important;font-size:12px!important;opacity:.68}
.dc-world-actions{gap:10px 16px;margin-top:16px}
.dc-world-actions .dc-cta{padding:10px 13px}
.dc-world-ui{right:7%;bottom:10%;width:min(43%,620px);filter:drop-shadow(0 22px 38px rgba(0,0,0,.45))}
.dc-world-ui .shot{box-shadow:0 0 28px rgba(63,191,203,.08)}
.dc-world-actions .dc-login,.dc-world-actions .dc-interest{font-size:12px;color:rgba(169,197,200,.7)}
.pr-world{min-height:78svh}
.pl-world{min-height:78svh}
.pl-world::before{left:16%;right:16%;top:9%;bottom:8%;opacity:.6}
.pl-world-back{left:9%;height:82%;opacity:.17}
.pl-world-mid{left:24%;height:80%;opacity:.62}
.pl-world-front{left:48%;top:16%;height:66%;opacity:.7}
.pl-world-signal{opacity:.12;width:15%;right:9%;bottom:10%}
.pl-world-copy{left:7%;top:25%;width:min(34%,420px);padding:21px;background:linear-gradient(110deg,rgba(5,11,18,.82),rgba(5,11,18,.24))}
.pl-world-copy .h-eb{font-size:12px}
.pl-world-copy h2{margin-top:12px;font-size:clamp(34px,3.7vw,52px)}
.pl-world-copy>p:not(.h-eb){max-width:34ch;margin-top:10px;font-size:13px}
.pl-world-copy .pr-status{margin-top:9px;padding:0;border:0;background:none;font-size:12px;opacity:.68}
.pl-world-copy .pr-status::before{display:none}
.pl-world-start{display:none}
.pl-world-copy>a{margin-top:11px}
.ct-world{padding:5vh 6vw;background:radial-gradient(ellipse at 76% 42%,rgba(37,97,112,.14),transparent 48%),#080e17}
.ct-world .ct-head .h-title{font-size:clamp(34px,3.6vw,52px)}
.ct-world .ct-grid{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:3vw;padding-top:2vh}
.ct-world .ct-col{padding:0 1vw;border-left-color:rgba(131,218,221,.1)}
.ct-world .ct-col:first-child{padding-left:0}
.ct-world .ct-share .ct-say{max-width:34ch;margin-top:12px;font-size:clamp(18px,1.6vw,23px);line-height:1.3}
.ct-world .ct-pub{display:grid;grid-template-columns:72px 1fr;column-gap:14px;align-items:center}
.ct-world .ct-pub .ct-k{grid-column:1/-1}
.ct-world .ct-book{display:contents}
.ct-world .ct-cover{grid-column:1;grid-row:2 / span 4;width:66px;height:86px;object-fit:cover;box-shadow:0 10px 25px #0007}
.ct-world .ct-bt{grid-column:2;grid-row:2 / span 4}
.ct-world .ct-title{font-size:18px}
.ct-world .ct-desc{font-size:12px;line-height:1.4}
.ct-world .ct-go{font-size:12px}
.ct-world .ct-share{display:block;background:none;border:0;border-left:1px solid rgba(131,218,221,.1);box-shadow:none;transform:none;padding:0 1vw}
.ct-world .ct-share .ct-handle{font-size:clamp(26px,2.4vw,38px)}
.ct-world .ct-share .ct-desc{font-size:12px;line-height:1.4}
.ct-world .ct-share .ct-go{font-size:12px;color:#83dadd}
.ct-world .cl-path{margin:8px 0 0}
.cl{min-height:74svh}
.cl-text{padding-top:8vh;padding-bottom:8vh}
.cl-title{font-size:clamp(36px,4vw,58px)}
.cl-sup{font-size:15px;max-width:36ch}
@media(max-width:800px){
  .phflow.is-motion .t-method{margin-top:0}
  .t-method{--len:1.35}
  .tm-list-wrap{left:24px;right:24px;top:34%}
  .tm-w{font-size:clamp(38px,10vw,52px)}
  .tm-intro{padding:0 24px 12svh}
  .tm-intro h2{font-size:clamp(36px,9vw,48px)}
  .st-journey{min-height:0}
  .st-journey .st-text{padding-top:210px}
  .wp-collab .wp-card{opacity:.55;transform:perspective(900px) rotateY(-5deg) translateZ(0) scale(.94)}
  .wp-collab .wp-card:nth-child(2){opacity:1;transform:perspective(900px) rotateY(0) translateZ(12px) scale(1)}
  .dc-world{min-height:0}
  .dc-world-art{opacity:.1}
  .dc-world-portal{opacity:.32}
  .pl-world{min-height:620px}
  .pl-world-signal{display:none}
  .pl-world-copy{top:10%;width:84%;padding:18px}
  .ct-world .ct-grid{grid-template-columns:1fr;gap:22px}
  .ct-world .ct-share{display:block;border-left:0}
  .cl{min-height:0}
}

/* Sequence endpoints: finish the method climax before the next chapter enters. */
.tm-list li:nth-child(1){--show:min(clamp(0,(var(--p) - .02)/.04,1),clamp(0,(.24 - var(--p))/.04,1))}
.tm-list li:nth-child(5){--show:min(clamp(0,(var(--p) - .79)/.04,1),clamp(0,(.87 - var(--p))/.04,1))}
.tm-intro .eb{--at:.86}
.tm-intro h2{--at:.89}
.tm-intro .sup{--at:.92}

/* Final pacing pass: let each chapter finish before the next has visual weight. */
.phflow.is-motion[data-phase="0"] .L-hero{z-index:4}
.phflow.is-motion[data-phase="0"] .L-build{z-index:2}
.phflow.is-motion .steps li{opacity:.18;transition:opacity .35s ease,color .35s ease}
.phflow.is-motion[data-phase="1"] .steps li:nth-child(1),
.phflow.is-motion[data-phase="2"] .steps li:nth-child(2),
.phflow.is-motion[data-phase="3"] .steps li:nth-child(3),
.phflow.is-motion[data-phase="4"] .steps li:nth-child(4),
.phflow.is-motion[data-phase="5"] .steps li:nth-child(5){opacity:1}
.phflow.is-motion[data-phase="4"] .mw-solucao,.phflow.is-motion[data-phase="4"] .mw-escala{opacity:0!important;visibility:hidden}
.phflow.is-motion[data-phase="5"] .mw-sistema{opacity:0!important;visibility:hidden}
.phflow.is-motion .b-head{transition:opacity .35s ease}
.phflow.is-motion[data-phase="4"] .b-head{opacity:.24}
.phflow.is-motion[data-phase="4"] .L-build .ps-per{opacity:.14!important}
.phflow.is-motion[data-phase="4"] .b-head,.phflow.is-motion[data-phase="5"] .b-head{opacity:.12!important}
.phflow.is-motion[data-phase="4"] .b-support,.phflow.is-motion[data-phase="5"] .b-support{opacity:0!important;visibility:hidden}
.tm-list li:nth-child(5){--show:min(clamp(0,(var(--p) - .79)/.04,1),clamp(0,(.82 - var(--p))/.04,1))}
.tm-intro .eb{--at:.89}
.tm-intro h2{--at:.93}
.tm-intro .sup{--at:.97}
.tm-intro > *{opacity:calc(var(--in) * (1 - clamp(0,(var(--p) - .96)/.04,1)))}
.ho-lines{opacity:.42}
.ho-lines span{opacity:calc(1 - var(--cv) * 1.4);font-size:12px}
.ho-from,.ho-to{font-size:clamp(52px,8vw,112px)}
.ho-text{grid-template-columns:1fr;gap:0;top:calc(50% + 11vh);right:auto;max-width:650px}
.ho-next{display:none}
.ho .runhead{opacity:calc(1 - clamp(0,(var(--p) - .7)/.2,1))}
.ho-lines,.ho-from,.ho-to,.ho-text{transition:opacity .3s ease}
.ho-lines{opacity:calc(.42 * (1 - clamp(0,(var(--p) - .78)/.14,1)))}
.ho-from{opacity:calc((1 - var(--cv)) * (1 - clamp(0,(var(--p) - .78)/.14,1)))}
.ho-to{opacity:calc(var(--cv) * (1 - clamp(0,(var(--p) - .78)/.14,1)))}
.ho-text{opacity:calc(var(--tx) * (1 - clamp(0,(var(--p) - .72)/.18,1)))}
.st-journey .scene-fb{clip-path:inset(15% 0 0);mask-image:linear-gradient(90deg,#000 0%,#000 70%,transparent 100%)}
.st-journey::before,.st-journey::after{opacity:.55}
.wp-world{opacity:.55}
.ecosystem::before,.eco-architecture,.eco-halo,.eco-shadow{opacity:.38}
.eco-node:not(.eco-portal--1){opacity:.42}
.eco-node:not(.eco-portal--1) .eco-portal-copy{opacity:.3}
.eco-node:not(.eco-portal--1) a>img{opacity:.08}
.eco-node:not(.eco-portal--1) a>img{opacity:.16}
.dc-world{mask-image:linear-gradient(180deg,transparent 0%,#000 14%,#000 88%,transparent 100%);-webkit-mask-image:linear-gradient(180deg,transparent 0%,#000 14%,#000 88%,transparent 100%)}
.dc-world-portal{opacity:.08;filter:saturate(.62) brightness(.68)}
.dc-world-art{display:none}
.dc-world-ui{width:min(45%,660px);bottom:12%}
.pl-world{mask-image:linear-gradient(180deg,transparent 0%,#000 12%,#000 88%,transparent 100%);-webkit-mask-image:linear-gradient(180deg,transparent 0%,#000 12%,#000 88%,transparent 100%)}
.pl-world-signal{opacity:.06}
.cl .scene-fb{mask-image:linear-gradient(180deg,transparent 0%,#000 26%,#000 100%);-webkit-mask-image:linear-gradient(180deg,transparent 0%,#000 26%,#000 100%)}
@media(max-width:800px){
  .ho-from,.ho-to{font-size:clamp(44px,15vw,72px)}
  .ho-text{top:calc(50% + 8vh);right:20px}
  .st-journey .scene-fb{clip-path:inset(10% 0 0)}
  .dc-world,.pl-world{-webkit-mask-image:none;mask-image:none}
  .cl .scene-fb{-webkit-mask-image:linear-gradient(180deg,transparent 0%,#000 18%,#000 100%);mask-image:linear-gradient(180deg,transparent 0%,#000 18%,#000 100%)}
}

/* Final owner polish: one chapter owns the viewport, with a paced proof rail. */
.t-method{--len:1.55}
.ho{--len:1.35}
.st-journey{min-height:100svh}

/* 2026-10-13 site review: normalize handoff pacing (longer travel + smootherstep
   via data-ease="smooth") so the Operations → System beat can't be flicked past. */
.ho{--len:1.8}
.st-journey .st-text{padding-top:12vh;padding-bottom:10vh}

.wp[data-track]{--len:2.6;min-height:100svh;padding:0;overflow:clip}
.wp[data-track]>.wp-pin{position:relative;display:flex;min-height:100svh;height:100svh;align-items:center;overflow:hidden;padding:9vh 5vw 7vh}
.motion .wp[data-track]>.wp-pin{position:sticky;height:100svh;min-height:0}
.wp[data-track] .wp-in{width:100%;max-width:1480px;margin:0 auto;gap:0}
.wp[data-track] .wp-collab .wp-lab{margin:0 0 3vh}
.wp[data-track] .wp-collab .wp-row{align-items:center;min-height:58vh;padding:0 2vw}
.wp[data-track] .wp-card{--focus:0;opacity:calc(.4 + var(--focus)*.6);transform:perspective(1300px) rotateY(var(--ry)) translateZ(calc(4px + var(--focus)*48px)) scale(calc(.88 + var(--focus)*.12));transition:opacity .42s ease,transform .6s cubic-bezier(.2,.7,.2,1)}
.wp[data-track] .wp-card:nth-child(1){--focus:var(--cleci,0);--ry:8deg;margin-top:2vh}
.wp[data-track] .wp-card:nth-child(2){--focus:var(--cpamela,0);--ry:-2deg;margin-top:-2vh}
.wp[data-track] .wp-card:nth-child(3){--focus:var(--clc,0);--ry:-8deg;margin-top:2vh}
.wp[data-track] .wp-fig{opacity:calc(.6 + var(--focus)*.4);transition:opacity .42s ease}
.wp[data-track] .wp-tx{opacity:calc(.7 + var(--focus)*.3);transition:opacity .42s ease}
.wp[data-track] .wp-card:hover,.wp[data-track] .wp-card:focus-within{opacity:1}

.ecosystem{min-height:100svh;aspect-ratio:auto;width:100%;overflow:hidden}
.dc-world{--len:1;min-height:100svh;padding-top:10vh;padding-bottom:10vh;mask-image:none;-webkit-mask-image:none;display:flex;flex-direction:column;justify-content:center}
.dc-world-copy .runhead{margin-bottom:4vh}
.dc-world-ui{bottom:13%;width:min(45%,660px)}
.pr-world{min-height:100svh}
.pl-world{min-height:100svh;mask-image:none;-webkit-mask-image:none}
.ct-world{min-height:90svh;display:flex;flex-direction:column;justify-content:center}
.ct-world .ct-head .h-title{color:var(--ink)}
.cl{min-height:100svh}
.cl-text{padding-top:9vh;padding-bottom:9vh}
html.has-world .tm-method{display:block}
.tm-bridge{display:none}
.wp-world{opacity:.38}
.dc-world-portal{opacity:.025!important}
.dc-world-copy .dc-status{font-size:12px!important;opacity:.78!important}
.dc-world-actions .dc-login,.dc-world-actions .dc-interest{opacity:.58}

/* The system climax clears the supporting statement before it takes focus. */
.tm-intro .eb{--at:.82}
.tm-intro h2{--at:.85}
.tm-intro .sup{--at:.9}
.tm-intro > *{opacity:calc(var(--in) * (1 - clamp(0,(var(--p) - .985)/.015,1)))}
.tm-list li.keep .tm-w{transition:color .3s ease,-webkit-text-stroke-color .3s ease}
.tm-bridge{opacity:calc(var(--in) * (1 - clamp(0,(var(--p) - .76)/.14,1)))}

@media(max-width:800px){
  .t-method{--len:1.35}
  .st-journey{min-height:0}
  .wp[data-track]{height:auto!important;min-height:0;padding:52px 20px 48px}
  .wp[data-track]>.wp-pin{position:relative!important;height:auto;min-height:0;overflow:visible;padding:0}
  .wp[data-track] .wp-in{min-height:0}
  .wp[data-track] .wp-collab .wp-row{min-height:0}
  .wp[data-track] .wp-card{opacity:1;transform:none!important}
  .wp[data-track] .wp-fig,.wp[data-track] .wp-tx{opacity:1}
  .ecosystem{min-height:0}
  .dc-world{min-height:0}
  .pr-world{min-height:0}
  .pl-world{min-height:620px}
  .ct-world{min-height:0}
  .cl{min-height:0}
}

/* ==== FINAL POLISH 2026-10-07 (owner "quase lá": surgical, last in cascade) ==== */
/* Typography: balanced display headlines, no orphans */
.ph h2,.ph .h-title,.ph .cl-title,.ph .st-title{text-wrap:balance}
.ph .cl-title{max-width:none}
/* Story: leaked legacy timeline bullets/rule off the 4-column path; soft edge instead of a hard clip */
.st-world-path::before,.st-world-path li::before{content:none;display:none}
.st-world-path{padding-left:0}
.st-journey .scene-fb{clip-path:none;-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 16%,#000 84%,transparent 100%),linear-gradient(90deg,#000 0%,#000 70%,transparent 100%);mask-image:linear-gradient(180deg,transparent 0,#000 16%,#000 84%,transparent 100%),linear-gradient(90deg,#000 0%,#000 70%,transparent 100%);-webkit-mask-composite:source-in;mask-composite:intersect}
/* Command: the product proof leads; links readable; CTA never wraps */
.dc-world-copy{width:min(36%,470px)}
.dc-world-ui{width:min(55%,820px);right:5%;bottom:11%}
.dc-world-actions{gap:12px 22px}
.dc-world-actions .dc-cta{white-space:nowrap;display:inline-flex;align-items:center;gap:14px;padding:12px 16px;font-size:13px;color:#eaf4f4;border-color:rgba(131,218,221,.7)}
.dc-world-actions .dc-cta span{color:#83dadd}
.dc-world-actions .dc-login{opacity:1;font-size:12px;color:#d4e6e7;text-decoration:underline;text-decoration-color:rgba(131,218,221,.6);text-underline-offset:4px;white-space:nowrap}
.dc-world-actions .dc-site{opacity:.9;font-size:12px;color:#b9d0d2;white-space:nowrap}
.dc-world-copy .dc-status{opacity:.9!important;font-size:12px!important}
/* Learning: one primary action, one secondary; eyebrow inside its panel */
.pl-world-copy{width:min(40%,500px)}
.pl-world-copy .h-eb{white-space:normal;line-height:1.5}
.pl-world-copy .pr-status{display:block;width:fit-content;max-width:100%;letter-spacing:.1em;font-size:12px;line-height:1.7;opacity:.9}
.pl-world-copy>a{display:inline-flex;align-items:center;gap:10px;margin:16px 22px 0 0;white-space:nowrap}
.pl-world-copy>a.pl-cta{padding:11px 16px;border:1px solid rgba(131,218,221,.7);color:#eaf4f4;font-size:13px;letter-spacing:.04em}
.pl-world-copy>a.pl-my{font-size:12px;color:#d4e6e7;border-bottom:1px solid rgba(131,218,221,.5);padding-bottom:2px}
/* Progressive enhancement: without JS (static tracks) Selected Work stays fully readable */
.wp.is-static .wp-card{opacity:1!important}
/* Content (dark chapter): links must be readable */
.ct-world .ct-share{opacity:1!important}
.ct-world .ct-go{color:#d9ecec;border-bottom-color:#83dadd}
.ct-world .ct-meta,.ct-world .ct-k{color:#a9c0c2}
/* Ecosystem: quiet, not illegible */
.eco-node:not(.eco-portal--1) .eco-portal-copy{opacity:.92}
.eco-node:not(.eco-portal--1) h3{color:#c9d8da}
.eco-node p{color:#a8bcbe}
.eco-node:not(.eco-portal--1) a>img{opacity:.3}

@media(max-width:800px){
  /* the late desktop blocks above had overridden the earlier mobile rules (figure collapsed to 0px, copy column to ~38%) */
  .ecosystem{display:flex;flex-direction:column;align-items:stretch;aspect-ratio:auto;min-height:0;width:100%}
  .ecosystem .eco-figure{position:relative;order:4;left:auto;bottom:auto;top:auto;width:min(62%,230px);height:300px;margin:26px auto 0;overflow:visible}
  .ecosystem .eco-nodes{order:3}
  .dc-world{min-height:0;padding:56px 22px 48px;display:block}
  .dc-world-copy{width:100%;padding:0 0 clamp(150px,46vw,210px)}
  .dc-world-art{display:block;left:auto;right:-8%;top:2%;height:46%;max-width:58%;opacity:.3}
  .dc-world-portal{opacity:.3;right:-8%;top:5%;width:82%;height:46%}
  .dc-world-ui{right:3%;bottom:34px;left:auto;width:92%}
  .dc-world-actions{flex-direction:row;flex-wrap:wrap;gap:14px 18px}
  .dc-world-actions .dc-cta{font-size:13px}
  .pl-world{min-height:660px;margin-bottom:0}
  .pl-world-copy{left:6%;top:8%;width:88%}
  .pl-world-copy>a{margin:14px 18px 0 0}
  .ct-world{padding-top:72px}
  .cl .cl-meta,.cl .cl-meta a{text-shadow:0 1px 8px rgba(0,0,0,.85)}
  .cl .cl-meta{color:#c4d3d4}
  .st-journey .st-text p,.st-journey .st-text h2,.st-journey .st-text li{text-shadow:0 1px 14px rgba(4,8,14,.95),0 0 3px rgba(4,8,14,.7)}
}

/* ==== HERO CLARITY PASS 2026-10-15 =============================================================
   On phones the hero master intentionally fills the viewport. A controlled tonal plane preserves
   the portrait while reserving a calm reading field for the identity, proposition and primary CTA. */
@media(max-width:800px){
  .ph-hero::before{
    content:"";
    position:absolute;
    z-index:10;
    inset:0;
    pointer-events:none;
    background:
      radial-gradient(ellipse 66% 40% at 4% 27%,rgba(3,8,12,.80) 0%,rgba(3,8,12,.57) 41%,rgba(3,8,12,0) 74%),
      linear-gradient(90deg,rgba(3,8,12,.48) 0%,rgba(3,8,12,.30) 46%,rgba(3,8,12,0) 80%),
      linear-gradient(180deg,rgba(3,8,12,.12) 0%,rgba(3,8,12,0) 34%,rgba(3,8,12,.08) 66%,rgba(3,8,12,.58) 100%);
  }
  .ph-hero .hs-master{left:35%;right:auto;width:100%}
  .ph-hero .hs-img{filter:saturate(.90) contrast(1.05) brightness(.95)}
  .ph-hero .content{
    z-index:20;
    width:calc(100% - 40px);
    padding-top:max(84px,calc(64px + env(safe-area-inset-top)));
  }
  .ph-hero .ph-eyebrow{max-width:31ch;color:#c7dedf;line-height:1.45;text-shadow:0 1px 12px rgba(2,6,10,.86)}
  .ph-hero h1,.ph-hero .thesis,.ph-hero .lead{text-shadow:0 2px 16px rgba(2,6,10,.92)}
  .ph-hero .thesis{max-width:13ch}
  .ph-hero .lead{max-width:31ch;color:#e1ebeb}
  .ph-hero .cta{
    border-color:rgba(159,234,237,.76);
    background:rgba(4,14,19,.58);
    box-shadow:0 10px 28px rgba(0,0,0,.22),inset 0 0 0 1px rgba(255,255,255,.04);
  }
  .ph-hero .cta:hover,.ph-hero .cta:focus-visible{background:rgba(17,43,49,.78)}
}
@media(max-width:370px){
  .ph-hero .content{width:calc(100% - 32px);padding-top:max(78px,calc(64px + env(safe-area-inset-top)))}
  .ph-hero .thesis{max-width:12.5ch}
  .ph-hero .lead{max-width:29ch}
}
@media(min-width:601px) and (max-width:800px){
  .ph-hero .hs-master{left:11%}
}

/* The 2D fallback does not have the WebGL canvas that normally replaces the next chapter.
   Keep that chapter from ghosting through the transparent hero while phase 0 is active. */
html:not(.has-world) .phflow.is-motion[data-phase="0"] .ph-hero{background:#060a12}

/* VISUAL AUDIT 2026-10-14 — legible evidence and meaningful transitions, not empty scroll holds. */
.L-build .scene-fb::after{
  background:linear-gradient(270deg,rgba(5,9,16,.84) 0%,rgba(5,9,16,.64) 32%,rgba(5,9,16,.18) 68%,transparent 100%);
}
.phflow .b-copy .b-eyebrow,.phflow .b-copy .b-title,.phflow .b-copy .b-support{
  text-shadow:0 1px 12px rgba(0,0,0,.72);
}
.phflow .b-support{color:#e4ecec}

/* Keep the handoff, but show its explanation from entry and spend less scroll on the word morph. */
.ho{--len:1.24;--cv:clamp(0,(var(--p) - .08) / .55,1);--tx:1}
.ho-text{opacity:1}
.ho-lines{opacity:calc(.62 * (1 - clamp(0,(var(--p) - .78) / .14,1)))}
.ho-lines span{color:#a3b0b3}
.ho-from{-webkit-text-stroke-color:rgba(241,241,235,.44)}

/* Keep project and ecosystem labels readable while retaining depth in the imagery. */
.wp[data-track] .wp-card{opacity:calc(.72 + var(--focus,0) * .28)}
.eco-node:not(.eco-portal--1){opacity:.76}
@media(max-width:800px){
  .ho{--len:1.10}
  .wp[data-track] .wp-card{opacity:1}
}

/* Selected Work usability: readable summaries, semantic heading/list focus, and a mobile scroll cue. */
.wp-collab .wp-lab{font-family:var(--sans,Arial,Helvetica,sans-serif);font-weight:400;line-height:1.35}
.wp-collab .wp-line{display:block;font-size:clamp(12px,.95vw,14px);line-height:1.5;color:#c1cccd;max-width:40ch;margin:10px 0 0}
.wp-collab .wp-row:focus-visible{outline:2px solid var(--cyan);outline-offset:4px}
.wp-collab .wp-go:focus-visible{outline:2px solid var(--cyan);outline-offset:4px}
.wp-scroll-guide{display:none}
@media(max-width:800px){
  .wp-collab .wp-line{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden;font-size:12.5px;line-height:1.48}
  .wp-collab .wp-row{scroll-padding-inline:8px;overscroll-behavior-x:contain}
  .wp-scroll-guide{display:flex;align-items:center;gap:10px;margin:0 8px 4px;color:#b7c4c5;font-size:12px;line-height:1.3}
  .wp-scroll-hint{white-space:nowrap}
  .wp-scroll-meter{position:relative;flex:1;min-width:32px;height:2px;overflow:hidden;background:rgba(131,218,221,.18)}
  .wp-scroll-meter span{position:absolute;top:0;left:var(--wp-progress,0%);width:33.334%;height:100%;background:var(--cyan)}
  .wp-scroll-count{font:12px/1 ui-monospace,Menlo,monospace;letter-spacing:.1em;color:#d4e0e0;white-space:nowrap}
}

/* P1: show the canonical Method once; this next viewport is only the Work introduction. */
.t-method{--len:1}
.t-method .tm-intro > *{--in:1;opacity:1;transform:none}

/* Selected work — compact list (name · one line · link). Light "paper" surface breaks the dark run. Client projects, not owned companies. */
.wc{position:relative;padding:72px 0 64px;background:#efece6;color:#1b2529}
.wc-in{width:min(1100px,calc(100% - 40px));margin:0 auto}
.wc-lab{display:flex;gap:14px;margin:0 0 28px;font:12px/1.4 Arial,Helvetica,sans-serif;letter-spacing:.22em;text-transform:uppercase;color:#4a5659}
.wc-lab b{color:#1a7077;font-weight:600}
.wc-list{list-style:none;margin:0;padding:0;border-top:1px solid #c9c4ba}
.wc-item{display:grid;grid-template-columns:1fr auto;align-items:center;gap:8px 32px;padding:24px 0;border-bottom:1px solid #c9c4ba}
.wc-name{margin:0 0 8px;font:400 clamp(28px,3vw,38px)/1.1 "Playfair Display",Georgia,serif;color:#1b2529}
.wc-line{margin:0 0 8px;max-width:60ch;font:16px/1.55 Arial,Helvetica,sans-serif;color:#33403f}
.wc-role{margin:0;font:12px/1.4 Arial,Helvetica,sans-serif;letter-spacing:.16em;text-transform:uppercase;color:#566165}
.wc-go{display:inline-flex;align-items:center;min-height:44px;padding:0 4px;color:#14595f;font:600 12px/1 Arial,Helvetica,sans-serif;letter-spacing:.18em;text-transform:uppercase;text-decoration:underline;text-underline-offset:6px;text-decoration-thickness:1px;white-space:nowrap}
.wc-go:hover{text-decoration-thickness:2px}
.wc-go:focus-visible{outline:3px solid #1a7077;outline-offset:3px;border-radius:2px}
@media(max-width:640px){.wc{padding:48px 0 40px}.wc-item{grid-template-columns:1fr;gap:10px}.wc-go{justify-self:start}}
/* Touch targets ≥44px for secondary text links on small screens */
@media(max-width:800px){.dc-world-actions a,.pl-world-copy a,.ct-go,.cl-meta a,.cl-lang a{display:inline-flex;align-items:center;min-height:44px}.cl-lang{display:inline-flex;align-items:center;gap:6px}.cl-meta{align-items:center}}

/* Patrick Learning: platform framing (who it is for · learning loop · first world) */
.pl-world-copy .pl-for b,.pl-world-copy .pl-flag b{color:#e4ecec;font-weight:600}
.pl-world-copy>p.pl-steps{display:flex;flex-wrap:wrap;gap:2px 0;margin-top:12px;font:12px/1.5 Arial,Helvetica,sans-serif;letter-spacing:.06em;color:#83dadd;max-width:42ch}
.pl-steps span:not(:last-child)::after{content:"·";margin:0 8px;color:#6f8a8d}
.pl-world-copy>p.pl-for,.pl-world-copy>p.pl-flag{font-size:13px;max-width:42ch;font-style:normal}
@media(max-width:800px){.pl-world{min-height:max(100svh,860px)}}
.pl-world-copy>p.pl-flag{font-family:Arial,Helvetica,sans-serif;color:#cad7d9}
@media(max-width:800px){.pl-world-copy{background:linear-gradient(110deg,rgba(5,11,18,.88),rgba(5,11,18,.66))}}