@font-face{font-family:'That That New Pixel';src:url('./assets/fonts/ThatThatNewPixel-ItalicSquare.woff2') format('woff2');font-weight:400;font-style:normal;font-display:block}
@font-face{font-family:'PP Monument Extended';src:url('./assets/fonts/PPMonumentExtended-Bold.woff2') format('woff2');font-weight:700;font-style:normal;font-display:block}
@font-face{font-family:'PP Monument Extended';src:url('./assets/fonts/PPMonumentExtended-Black.woff2') format('woff2');font-weight:900;font-style:normal;font-display:block}
@font-face{font-family:'Big Shoulders';src:url('./assets/fonts/BigShoulders-Bold.woff2') format('woff2');font-weight:700;font-style:normal;font-display:block}
@font-face{font-family:'Geist';src:url('./assets/fonts/Geist-Regular.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
/* PP Neue Machina Plain (Pangram Pangram, the version without ink traps), body copy since
   21/10/2026: Medium for the text (there is no SemiBold) and Ultrabold for short bold runs. Latin subset. */
@font-face{font-family:'PP Neue Machina';src:url('./assets/fonts/PPNeueMachina-PlainMedium.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'PP Neue Machina';src:url('./assets/fonts/PPNeueMachina-PlainUltrabold.woff2') format('woff2');font-weight:800;font-style:normal;font-display:swap}
@font-face{font-family:'Iosevka Charon';src:url('./assets/fonts/IosevkaCharon-Bold.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap}

/* --u is one pixel of the 1920x1080 Figma frames, scaled to fit the screen. */
:root{color-scheme:dark;--night:#00110e;--teal:#007762;--sand:#c4b597;--orange:#f05524;--ink:#00201c;--dot:#005c54;
  --pixel:'That That New Pixel',monospace;--wide:'PP Monument Extended',sans-serif;--tall:'Big Shoulders',sans-serif;
  --sans:'Geist',system-ui,sans-serif;--label:'Iosevka Charon',var(--sans);--body:'PP Neue Machina',var(--sans);
  --u:min(calc(100vw / 1920),calc(100svh / 1080));font-family:var(--sans);font-synthesis:none}
/* Orange pages (Leo, 22/10/2026): on 02 and on the closing the background turns into the
   orange gradient of Figma frames 9 and 10 (2042:6232, 2042:6291) and everything on it into
   ink. The two backgrounds mix as an overlay, quickly and in place (Leo, 22/10/2026: not a
   sheet that moves): story.js flips --warm between 0 (green) and 1 (orange) as a hand-off
   starts and it eases over .4 s (Leo, the same day: quicker; it was .6 s, half way through
   the glide); the colours follow it: --fg for what is sand on green, --accent for what is
   orange. */
@property --warm{syntax:'<number>';inherits:true;initial-value:0}
:root{--warm:0;transition:--warm .4s ease-in-out;--warm-mix:calc(var(--warm) * 100%);
  --fg:color-mix(in srgb,var(--ink) var(--warm-mix),var(--sand));
  --accent:color-mix(in srgb,var(--ink) var(--warm-mix),var(--orange));
  --dot-idle:color-mix(in srgb,var(--ink) var(--warm-mix),var(--dot))}
*{box-sizing:border-box}
html,body{margin:0;width:100%;overflow-x:clip}
/* Phone browsers may inflate the type of long blocks: every size stays as written. */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{background:var(--night);color:var(--sand)}
h1,h2,p,figure{margin:0}
button{font:inherit;-webkit-tap-highlight-color:transparent}
a{color:inherit}
a:focus-visible,button:focus-visible,canvas:focus-visible{outline:2px solid var(--orange);outline-offset:6px}

/* Lenis */
html.lenis,html.lenis body{height:auto}
.lenis:not(.lenis-autoToggle).lenis-stopped{overflow:clip}
.lenis.lenis-smooth iframe{pointer-events:none}

/* Layers, back to front: gradient, ENGENHEIRO, 3D figure, CRIATIVO and page copy, fixed chrome. */
/* Dawn on load (Leo, 21/10/2026): --dawn 1 pushes the gradient down, darker overall, the
   base only a little lighter and no sand yet; story.js eases it to 0, the approved gradient. */
.atmosphere{position:fixed;inset:0;z-index:0;--dawn:0;
  background:linear-gradient(180deg,var(--night) calc(47.115% + var(--dawn) * 30%),var(--teal) calc(69.114% + var(--dawn) * 34%),var(--sand) calc(97.115% + var(--dawn) * 40%))}
/* The orange gradient of frames 9 and 10 over the green one, as opaque as --warm
   (cube-refraction.js paints the same). */
.atmosphere::after{content:"";position:absolute;inset:0;opacity:var(--warm);background:linear-gradient(180deg,var(--orange),var(--sand) 60%)}
/* No fade (Leo, 21/10/2026): the cube is fully opaque from the start, thrown in from below the screen. */
.stage{position:fixed;inset:0;z-index:2;pointer-events:none}
body[data-phase=loading] .stage{opacity:0}
.stage canvas{display:block;width:100%;height:100%;touch-action:pan-y;user-select:none;-webkit-user-select:none}
.stage[data-dragging=true] canvas{cursor:grabbing!important}
.stage:not([data-keyboard=true]) canvas:focus-visible{outline:none}
/* With no figure on screen the canvas lets the page copy take the pointer. */
body[data-figure=none] .stage{pointer-events:none}

.page{position:relative}
.pin{position:sticky;top:0;height:100vh;height:100svh;z-index:1;overflow:hidden;pointer-events:none}

/* 01 */
.hero{height:100vh;height:100svh}
/* ENGENHARIA / CRIATIVA (Leo, 22/10/2026; Figma frame 01, vector 2042:600): caps 207 px tall, baselines
   at 473 and 728 of 1080, so 270.43 px in this face (ascent .7572em, half-leading -.0354em). */
.hero-title{font:400 calc(270.43 * var(--u))/.91 var(--pixel);letter-spacing:-.02em;color:var(--sand);pointer-events:none}
.hero-word{position:absolute;left:0;right:0;text-align:center;white-space:nowrap}
.hero-back{z-index:1;top:calc(50% - .9696em)}
.hero-front{z-index:1;top:calc(50% - .0266em)}
.hero-line{display:block}
/* Line of copy under the title (Figma frame 01, 2042:602): 788 px down the 1080 frame, 709 wide; it
   comes in with the rest after the cube and leaves with the words. Behind the cube like the words
   (the cube reaches it as it turns; in front, dark letters crossed its dark pieces), so it enters
   the glass too (cube-refraction.js). */
.hero-copy{position:absolute;z-index:1;left:50%;top:calc(50% + 248.15 * var(--u));width:calc(709 * var(--u));margin-left:calc(-354 * var(--u));
  font:700 max(11px,calc(21.446 * var(--u)))/1.4 var(--wide);letter-spacing:-.02em;text-transform:uppercase;text-align:center;color:var(--night);pointer-events:none}
.hero-copy-line{display:block}
/* Hero words in the Figma gradient (LBK 2026, page 01, node 2038:528): #004539 at the top to
   the sand at the bottom, one gradient across both lines (frame y 215 to 840). Each word
   carries its slice in em from its own top; cube-refraction.js paints the same slices. The
   letter cells of the decryption carry it too, as the clip may skip inline-blocks. */
:root{--ink-top:#004539}
/* Glyphs overflow the .91em line: .25em of padding above and below keeps them inside the
   painted area of the clip (it cut their tops and feet), with the stops shifted to match. */
/* One gradient across both lines, from y 201.5 to 745.4 of the 1080 frame, as in the vector. */
.hero-back{--ink-from:-.0322em;--ink-to:1.9792em}
.hero-front{--ink-from:-.9751em;--ink-to:1.0362em}
.hero-line,.hero-line .decrypt-cell{background-image:linear-gradient(180deg,var(--ink-top) var(--ink-from),var(--sand) var(--ink-to));
  -webkit-background-clip:text;background-clip:text;color:transparent;padding:.25em 0;margin:-.25em 0}

/* 02 */
/* Start the second pin just after the hero words leave, without a blank screen. */
.media{height:460vh;height:460svh;margin-top:-54vh;margin-top:-54svh}
/* Orange kicker of frame 02 (Figma 1994:11618), 23px above the statement. Above
   the statement's reading shade; cards 3 and 6 (also 4, later in the DOM) still cross it. */
.media-label{position:absolute;z-index:4;left:0;right:0;top:calc(50% - 219 * var(--u));
  font:900 calc(24 * var(--u))/.91 var(--wide);color:var(--accent);text-align:center;text-transform:uppercase;white-space:nowrap}
/* Bold at the bio title's size (Leo, 21/10/2026), keeping its four lines, tracked -4% (Leo,
   22/10/2026: -2% as in Figma frame 9, then tighter still): in Bold 85 at -4% they hold for
   any width from 1285 to 1365 (the next word joins a line above that); 1325, the middle (it
   was 1456 untracked, 1390 at -2%). The closing title shares this type (Leo, 22/10/2026:
   the same size and settings as the text of 02). */
.media-copy,.closing-title{font:700 calc(85 * var(--u))/1.11 var(--tall);letter-spacing:-.04em;text-transform:uppercase;text-align:center;color:var(--fg)}
.media-copy{position:absolute;z-index:3;left:50%;top:calc(50% - 174 * var(--u));width:calc(1325 * var(--u));margin-left:calc(-662.5 * var(--u))}
/* The backdrop's color at 50vh: 13% of the way from night to teal.
   A broad, feathered ellipse follows the copy's existing fade, without a blur pass.
   Leo, 21/10/2026: first lighter (96% to 66% at the centre), then a little more closed (81%). */
.media-copy::before{content:"";position:absolute;inset:-70% -30%;z-index:-1;pointer-events:none;
  --reading-shade:color-mix(in srgb,#cba786 var(--warm-mix),color-mix(in srgb,var(--night) 87%,var(--teal)));
  background:radial-gradient(ellipse 50% 50% at 50% 50%,
    color-mix(in srgb,var(--reading-shade) 81%,transparent) 0%,
    color-mix(in srgb,var(--reading-shade) 73%,transparent) 32%,
    color-mix(in srgb,var(--reading-shade) 55%,transparent) 52%,
    color-mix(in srgb,var(--reading-shade) 28%,transparent) 72%,
    color-mix(in srgb,var(--reading-shade) 7%,transparent) 88%,transparent 100%)}
/* Gallery unit: the whole set of cards at 80% of the Figma size (Leo, 21/10/2026). */
.gallery{position:absolute;inset:0;--gu:calc(var(--u) * .8)}
/* One strip, based on frame 02. Compact slots add 264px; Itaú adds 312px; Calc
   grew 30% (+72px) and the 4:5 slot at 9 is 56px wider, so the cards after them
   shift right. The last three images were removed on request; the 10 slots
   alternate lower/upper from the first, with both rows 20% closer to the
   middle of the frame than in the Figma. */
.gallery-track{position:absolute;left:0;top:0;height:100%;width:calc(3202 * var(--gu))}
.shot{--depth:1;position:absolute;z-index:1;left:calc(var(--x) * var(--gu));top:calc(50% + (var(--top) - 540) * var(--gu));width:calc(var(--w) * var(--gu));
  aspect-ratio:9/16;border-radius:calc(8 * var(--gu));pointer-events:auto;will-change:transform}
/* Depth: story.js scales each shot by --depth and moves it --depth times as
   fast. Near shots pass in front of the others, far ones behind. The track
   itself never moves, so the shots share the statement's stacking context:
   it covers them all, except the .over-copy ones that cross in front of it. */
.shot.near{--depth:1.3;z-index:2}
.shot.far{--depth:.8;z-index:0}
.shot.over-copy{z-index:4}
.shot.editorial,.shot.feed{aspect-ratio:4/5}
.shot.square{aspect-ratio:1}
.shot img{display:block;width:100%;height:100%;object-fit:cover;border-radius:inherit;will-change:transform}
.shot.editorial img{object-fit:contain}
.shot[data-shot="0"]{--x:0;--top:495;--w:273}
.shot[data-shot="1"]{--x:333;--top:158;--w:240}
.shot[data-shot="2"]{--x:633;--top:486;--w:329}
.shot[data-shot="3"]{--x:1015;--top:126;--w:293}
.shot[data-shot="4"]{--x:1385;--top:427;--w:309}
.shot[data-shot="5"]{--x:1682;--top:114;--w:312}
.shot[data-shot="6"]{--x:1907;--top:530;--w:288}
.shot[data-shot="7"]{--x:2219;--top:169;--w:288}
.shot[data-shot="8"]{--x:2576;--top:499;--w:254}
.shot[data-shot="9"]{--x:2873;--top:166;--w:329}

/* Shared copy block of pages 03 to 06. */
.block{display:flex;flex-direction:column;align-items:flex-start;gap:calc(33 * var(--u));width:calc(550 * var(--u))}
/* All large Big Shoulders titles are Bold (Leo, 21/10/2026). */
.block-title{font:700 calc(111.623 * var(--u))/.91 var(--tall);color:var(--sand)}
.block-copy,.block-list{font:500 max(14px,calc(21 * var(--u)))/1.4 var(--body);letter-spacing:-.02em;color:var(--sand)}
.block-copy p+p{margin-top:1.4em}
.block-list{font-weight:800;letter-spacing:0}
.button{display:inline-flex;align-items:center;justify-content:center;padding:calc(5 * var(--u)) calc(12 * var(--u));border-radius:calc(4 * var(--u));
  background:var(--orange);color:var(--ink);font:700 max(14px,calc(21 * var(--u)))/1.4 var(--label);letter-spacing:-.02em;text-decoration:none;white-space:nowrap}
.button.outline{background:none;border:calc(2 * var(--u)) solid var(--sand);color:var(--sand)}
.button:hover{filter:brightness(1.08)}

/* 03, from Leo's mock of 21/10/2026 (1920×1080 reference): the portrait fills
   the left half and the bio the right half at 32px; the title is a block of
   its own, centred on the page and aligned with neither column. */
.about{height:100vh;height:100svh}
.about-photo{position:absolute;left:calc(50% - 814 * var(--u));top:calc(50% + 114 * var(--u));width:calc(728 * var(--u));height:calc(972 * var(--u));
  border-radius:calc(8 * var(--u));overflow:hidden;z-index:3}
.about-photo img{display:block;width:100%;height:100%;object-fit:cover}
/* Title block from Leo's second mock: left edge at 332 of 1920, three lines
   ("DESIGN, TECNOLOGIA E / NEGÓCIOS. TUDO SE / ENCAIXA."), Bold. */
.about-title{position:absolute;z-index:3;left:calc(50% - 628 * var(--u));top:calc(50% - 414 * var(--u));width:calc(720 * var(--u));
  font:700 calc(85 * var(--u))/1.11 var(--tall);color:var(--sand)}
.about-text{position:absolute;left:calc(50% - 25 * var(--u));top:calc(50% - 66 * var(--u));width:calc(722 * var(--u));z-index:3}
.about-copy{font-size:max(16px,calc(32 * var(--u)))}
/* The words Leo marked in the bio (22/10/2026): Ultrabold and underlined, as in Figma frame 8. */
.about-copy strong{font-weight:800;text-decoration:underline;text-decoration-thickness:from-font;text-underline-position:from-font}

/* 04 to 06 (Leo, 21/10/2026): the three texts scroll by in sequence, a short
   gap apart, beside the cube, with the type of the reworked Figma frame 04:
   title 111.6 Bold, paragraph 32 at 679 wide, list 24 Bold with bullets.
   story.js sets the top padding so MÍDIA starts only after the bio and photo. */
.fronts{z-index:3;pointer-events:none}
.front-text{gap:0;width:calc(679 * var(--u));margin-left:calc(50% - 679 * var(--u));pointer-events:auto}
/* MÍDIA, EDUCAÇÃO and SERVIÇOS in the hero's pixel face (Leo, 21/10/2026); size and
   line height stay those of .block-title, the tracking is the hero's. */
.front .block-title{font-family:var(--pixel);font-weight:400;letter-spacing:-.02em}
/* Thick orange bar behind the word, across its baseline (.717em down the .91em line):
   from .077em above to .063em below it, a hair past the ink at both ends (Leo's mock,
   21/10/2026; story.js measures --ink-left/--ink-right). A box, not text-decoration,
   which skips the inline-block letter cells while the title decrypts. */
.front-text .block-title{position:relative;isolation:isolate;width:fit-content}
.front .block-title::after{content:"";position:absolute;z-index:-1;top:.64em;height:.14em;
  left:calc(var(--ink-left,0em) - .015em);right:calc(var(--ink-right,0em) - .015em);background:var(--orange);
  transform:scaleX(var(--bar,1));transform-origin:0 50%}
.front-copy{margin-top:calc(12 * var(--u));font-size:max(16px,calc(32 * var(--u)))}
.front-copy strong{font-weight:800}
.front-list{width:calc(550 * var(--u));margin:calc(40 * var(--u)) 0 0;padding:0;list-style:none;font-size:max(14px,calc(24 * var(--u)))}
/* Arrows instead of discs, on the paragraph's left edge (Leo, 21/10/2026); a wrapped item
   lines up with its text. The arrow is decoration, hidden from screen readers. */
.front-list li{position:relative;padding-left:1.4em}
.front-list li::before{content:"\2192";content:"\2192" / "";position:absolute;left:0}
/* EDUCAÇÃO mirrors the other two (Leo, 21/10/2026): the block on the right half,
   the cube on the left (cube-journey.js reads .mirror). */
.front.mirror .front-text{margin-left:50%}

/* 07 */
.closing{--closing-cube-size:calc(460 * var(--u));height:100vh;height:100svh;display:flex;align-items:center;justify-content:center}
.closing-layout{display:flex;flex-direction:column;align-items:center;gap:calc(20 * var(--u))}
.closing-cube-slot{width:var(--closing-cube-size);height:var(--closing-cube-size)}
/* Collapse part of the rotation envelope so the visible cube overlaps the
   first line, with the whole composition still centered in the viewport. */
.closing-text{margin-top:calc(-.28 * var(--closing-cube-size));display:flex;flex-direction:column;align-items:center;gap:calc(22 * var(--u))}
/* The statement's type (above); its two lines, VAMOS JUNTOS PARA O / PRÓXIMO NÍVEL, hold
   from 665 to 940 wide: 800, the middle. */
.closing-title{position:relative;z-index:1;width:calc(800 * var(--u))}
.closing-copy,.closing-actions{position:relative;z-index:3}
.closing-copy{width:max(320px,calc(576 * var(--u)));font:500 max(14px,calc(21 * var(--u)))/1.4 var(--body);text-align:center;color:var(--ink)}
.closing-actions{display:flex;justify-content:center;gap:calc(10 * var(--u))}
/* Figma frame 10: ink buttons with sand text and border on the orange gradient. */
.closing-actions .button.outline{background:var(--ink);color:var(--sand);border-color:var(--sand)}

/* Glass strips at the top and bottom (Leo, 21/10/2026): above the page and the
   cube, under the chrome (same z-index, earlier in the DOM). Each layer blurs
   a deeper slice of the strip, so the blur grows to about 9px at the screen
   edge; glass-bands.js adds the ripple underneath. */
.glass{position:fixed;left:0;right:0;z-index:4;height:12vh;height:12svh;pointer-events:none}
.glass-top{top:0;--edge:to top}
.glass-bottom{bottom:0;--edge:to bottom}
.glass>i{position:absolute;inset:0}
.glass>i:nth-last-child(4){-webkit-backdrop-filter:blur(1px);backdrop-filter:blur(1px);-webkit-mask-image:linear-gradient(var(--edge),transparent 0,#000 25%);mask-image:linear-gradient(var(--edge),transparent 0,#000 25%)}
.glass>i:nth-last-child(3){-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);-webkit-mask-image:linear-gradient(var(--edge),transparent 25%,#000 50%);mask-image:linear-gradient(var(--edge),transparent 25%,#000 50%)}
.glass>i:nth-last-child(2){-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);-webkit-mask-image:linear-gradient(var(--edge),transparent 50%,#000 75%);mask-image:linear-gradient(var(--edge),transparent 50%,#000 75%)}
.glass>i:nth-last-child(1){-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);-webkit-mask-image:linear-gradient(var(--edge),transparent 75%,#000 100%);mask-image:linear-gradient(var(--edge),transparent 75%,#000 100%)}
.glass-defs{position:absolute;width:0;height:0;overflow:hidden}

/* Fixed chrome. */
.chrome{z-index:4}
.topbar{position:fixed;inset:0 0 auto;height:0}
/* Edges as Leo adjusted them in Figma frames 8 to 10 (22/10/2026): logo 172 wide, the
   language choice where the menu was, square 10px dots, smaller e-mail nearer the corner. */
.brand{position:absolute;left:calc(30 * var(--u));top:calc(30 * var(--u));display:block;line-height:0;color:var(--fg)}
.brand-logo{display:block;width:calc(172 * var(--u));min-width:105px;height:auto}
.brand-logo .logo-mark{fill:var(--accent)}
.language{position:absolute;right:calc(30 * var(--u));top:calc(21 * var(--u));display:flex;align-items:baseline;
  font:700 max(14px,calc(21 * var(--u)))/1.4 var(--tall);letter-spacing:-.02em;color:var(--fg);white-space:nowrap}
.language button{padding:0;border:0;background:none;color:inherit;font:inherit;letter-spacing:inherit;cursor:pointer}
.language button[aria-pressed=true]{text-decoration:underline;text-decoration-thickness:from-font;text-underline-position:from-font;text-decoration-skip-ink:none}
.language-bar{white-space:pre}
.page-nav{position:fixed;right:calc(32 * var(--u));top:50%;translate:0 -50%;display:flex;flex-direction:column}
.page-nav button{display:block;width:max(8px,calc(10 * var(--u)));height:calc(max(8px,calc(10 * var(--u))) + max(3px,calc(4 * var(--u))));padding:0 0 max(3px,calc(4 * var(--u)));border:0;background:none;cursor:pointer}
.page-nav button:last-child{height:max(8px,calc(10 * var(--u)));padding:0}
.page-nav button::before{content:"";display:block;width:100%;aspect-ratio:1;background:var(--dot-idle);transition:background-color .3s}
.page-nav button[aria-current=true]::before{background:var(--orange)}
.footbar{position:fixed;inset:auto 0 0;height:0}
.email{position:absolute;left:calc(25 * var(--u));bottom:calc(27 * var(--u));font:700 max(9px,calc(14 * var(--u)))/.85 var(--wide);letter-spacing:-.02em;color:var(--ink);text-decoration:none;white-space:nowrap}
.social{position:absolute;right:calc(30 * var(--u));bottom:calc(30 * var(--u));display:flex;gap:calc(15.46 * var(--u));margin:0;padding:0;list-style:none}
.social a{display:block;line-height:0}
.social img{display:block;width:max(16px,calc(23.6 * var(--u)));height:max(16px,calc(23.6 * var(--u)))}

/* Film grain over the whole page, chrome included (Leo, 21/10/2026, after the static on
   ventarisglobal.com.br): a grey turbulence tile, one tile wider than the screen on each
   side, jumping between eight offsets in hard steps so the static seems to change.
   Grey, opaque and high-contrast like TV static, so 5% reads as texture. */
.grain{position:fixed;inset:-240px;z-index:20;pointer-events:none;opacity:.05;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n' color-interpolation-filters='sRGB'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.7' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='.33 .33 .33 0 0 .33 .33 .33 0 0 .33 .33 .33 0 0 0 0 0 0 1'/%3E%3CfeComponentTransfer%3E%3CfeFuncR type='linear' slope='3' intercept='-1'/%3E%3CfeFuncG type='linear' slope='3' intercept='-1'/%3E%3CfeFuncB type='linear' slope='3' intercept='-1'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E") 0 0/240px 240px;animation:grain .5s steps(1) infinite}
@keyframes grain{0%{transform:translate(0,0)}12.5%{transform:translate(-73px,41px)}25%{transform:translate(112px,-87px)}
  37.5%{transform:translate(-151px,-23px)}50%{transform:translate(58px,133px)}62.5%{transform:translate(-37px,-162px)}
  75%{transform:translate(169px,64px)}87.5%{transform:translate(-118px,107px)}}

.motion-toggle{position:fixed;z-index:6;left:34px;bottom:64px;display:flex;gap:8px;align-items:center;padding:8px 12px;border:1px solid var(--ink);border-radius:2px;background:var(--sand);color:var(--ink);font-size:12px;line-height:14px;cursor:pointer}
.motion-toggle:not(:focus-visible){width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);border:0;white-space:nowrap}

/* Loading counter (Leo, 21/10/2026; loader.js): 0% to 100% in the hero's pixel face and
   gradient, centred where the words then rise. Right-aligned in a box as wide as "100%",
   so the % holds still while the digits count; it rises away with a fade when done. */
.loading{position:fixed;z-index:5;inset:0;display:grid;place-items:center;pointer-events:none;
  font:400 calc(270.43 * var(--u))/.91 var(--pixel);letter-spacing:-.02em;transition:opacity .45s ease-in,translate .45s ease-in}
.loading-count{width:1.9em;text-align:right;white-space:nowrap;padding:.25em 0;
  background-image:linear-gradient(180deg,var(--ink-top) .3em,var(--sand) 1.05em);-webkit-background-clip:text;background-clip:text;color:transparent}
.loading.done{opacity:0;translate:0 -.12em}
.loading[hidden]{display:none}
@keyframes appear{to{opacity:1}}
@keyframes vanish{to{opacity:0;visibility:hidden}}
.fallback{position:fixed;z-index:5;top:18%;left:50%;translate:-50% 0;text-align:center;color:var(--sand);font-size:12px}
.fallback img{width:min(45vh,65vw);border-radius:3px}
.fallback button{padding:10px 18px;background:transparent;border:1px solid currentColor;color:inherit;cursor:pointer}
.fallback[hidden]{display:none}
.noscript{position:fixed;top:40%;left:10%;right:10%;z-index:5;text-align:center;color:var(--sand)}
/* Decrypted titles (decrypt-text.js): words stay whole, and an encrypted letter
   keeps the real letter's advance, squeezing a wider random glyph from the left. */
.decrypt-word{white-space:nowrap}
.decrypt-cell{display:inline-block;text-align:center}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* Intro: the gradient, then the words, then the cube, then the chrome. JS lifts this;
   the delayed animation is only a failsafe if the script never runs. */
@media(scripting:enabled){
  html.intro .chrome,html.intro .hero-line,html.intro .hero-copy-line{opacity:0;animation:appear .01s 8s forwards}
  html.intro .loading{animation:vanish .01s 8s forwards}
  /* While loader.js counts, a slow network keeps the counter up: the failsafe waits longer
     (loader.js shows the page at once if the scripts fail). */
  html.intro.counting :is(.chrome,.hero-line,.hero-copy-line,.loading){animation-delay:30s}
  html.intro .atmosphere{--dawn:1}
}
@media(scripting:none){.loading{display:none}}

/* Phones and portrait tablets. Edges and hero as Figma frames 11 (570 by 1080) and 12 (730 by
   1080) (Leo, 22/10/2026): --v is a pixel of those frames, a 1080th of the height but never more
   than a 570th of the width, so a phone narrower than frame 11 shrinks to fit it; the floors are
   the desktop's. The language in PP Neue Machina, the chosen one in orange (its underline only
   shows on the orange pages, where both are ink); the dots up under it, at the top right. */
@media(max-width:700px),(max-aspect-ratio:4/5){
  :root{--v:min(calc(100vw / 570),calc(100svh / 1080));--hero-size:min(19.098vw,calc(170 * var(--v)))}
  .brand{left:calc(30 * var(--v));top:calc(30 * var(--v))}.brand-logo{width:calc(169 * var(--v))}
  .language{right:calc(25 * var(--v));top:calc(43 * var(--v));font:500 max(14px,calc(17.291 * var(--v)))/1.4 var(--body);letter-spacing:-.02em}
  .language button[aria-pressed=true]{color:var(--accent);text-decoration-color:color-mix(in srgb,currentColor var(--warm-mix),transparent)}
  .page-nav{right:calc(25 * var(--v));top:calc(97 * var(--v));translate:none}
  .page-nav button{width:max(8px,calc(10 * var(--v)));height:calc(max(8px,calc(10 * var(--v))) + max(3px,calc(4 * var(--v))));padding-bottom:max(3px,calc(4 * var(--v)))}
  .page-nav button:last-child{height:max(8px,calc(10 * var(--v)))}
  .email{left:calc(30 * var(--v));bottom:calc(33.3 * var(--v));font-size:max(9px,calc(12.312 * var(--v)))}
  .social{right:calc(30 * var(--v));bottom:calc(30 * var(--v));gap:calc(15.46 * var(--v))}
  .social img{width:max(16px,calc(23.6 * var(--v)));height:max(16px,calc(23.6 * var(--v)))}

  /* ENGENHARIA 2.5% wider than the screen, a little past both edges (Leo: "vai sair da tela nas
     laterais levemente"): its ink is 5.365em wide in this face, so 102.46vw / 5.365, capped by
     the height on screens squarer than a portrait tablet. Its ink sits .077em left of its box. A
     line wider than its box starts at the left edge instead of centring, so the boxes reach past
     the screen (html clips the overflow). */
  .hero-title,.loading{font-size:var(--hero-size)}
  /* English (language.js): ENGINEERING is 7% wider than ENGENHARIA (5.77em to 5.374em), so the
     words shrink by as much and the longer one bleeds as ENGENHARIA does. */
  html[lang="en"] .hero-title{font-size:calc(var(--hero-size) * .931)}
  .hero-word{left:-25%;right:-25%}
  /* Cube, title and copy stacked around the middle as in both frames: the title's middle (cap
     top of ENGENHARIA to the baseline of CRIATIVA, 1.709em) 84.15 below the screen's, the copy
     28.5 under it, the cube 121.2 over it (cube-journey.js). */
  .hero-back{top:calc(50% + 84.15 * var(--v) - .8101em);padding-left:.077em}
  .hero-front{top:calc(50% + 84.15 * var(--v) + .1329em)}
  /* 14.148 of the frame (floor 11px), its lines as in the frames: 25.87em wide in 11, 32.44em in 12. */
  .hero-copy{left:0;right:0;width:min(32.44em,max(25.87em,63vw));margin:0 auto;
    top:calc(50% + 84.15 * var(--v) + .8545 * var(--hero-size) + 28.5 * var(--v));font-size:max(11px,calc(14.148 * var(--v)))}

  /* 02 as Figma frame 13 (Leo, 22/10/2026; 570 by 1080): the kicker in 14.466, the statement
     in 42 on 49 (also the closing title's type), its six lines holding from 450 to 470 wide in
     Bold at -4%: 461 (the frame's 497 is ExtraBold at -2%). The cards larger and spread over
     the whole portrait screen (Leo: "mais aberto para completar a tela na proporção 9:16"):
     sizes at .7 of the frame's pixel (--gu), the strip's steps at .45 (--gx) so about four show
     at once, and each card's centre 1.1 times as far from the middle (--gy), the upper row
     filling the top of the screen and the lower the bottom, both 22 up as in the frame; --ar is a
     card's height over width. Depth (size and parallax) softer than the desktop's, 1.15 and .9,
     so the near cards keep to the frame's sizes (180 to 227 wide). */
  .media-label{top:calc(50% - 187 * var(--v));font-size:calc(14.466 * var(--v))}
  /* Lines a little tighter than the frame's 49 (Leo, 22/10/2026): 45. */
  .media-copy,.closing-title{font-size:calc(42 * var(--v));line-height:1.07}
  .media-copy{left:0;right:0;width:calc(461 * var(--v));margin:0 auto;top:calc(50% - 158 * var(--v))}
  .gallery{--gu:calc(.7 * var(--v));--gx:calc(.45 * var(--v));--gy:calc(1.1 * var(--v))}
  .gallery-track{width:calc(3202 * var(--gx))}
  .shot{--ar:1.7778;--size:1;left:calc(var(--x) * var(--gx) + var(--w) * (1 - var(--size)) / 2 * var(--gu));width:calc(var(--w) * var(--size) * var(--gu));
    top:calc(50% - 22 * var(--v) + (var(--top) + var(--w) * var(--ar) / 2 - 540) * var(--gy) - var(--w) * var(--size) * var(--ar) / 2 * var(--gu))}
  .shot.editorial,.shot.feed{--ar:1.25}
  .shot.square{--ar:1}
  .shot.near{--depth:1.15}
  .shot.far{--depth:.9}
  /* --size shrinks a card around its own centre, keeping its place and speed: the
     third, the first to cross in front of the statement, at 75% (Leo, 22/10/2026). */
  .shot[data-shot="2"]{--size:.75}

  .block{width:auto;gap:18px}
  .block-title{font-size:13vw}
  .block-copy,.block-list{font-size:14px;line-height:1.45}
  .button{padding:5px 12px;border-radius:4px;font-size:15px}
  .button.outline{border-width:2px}

  /* 03 as Leo's frame of 22/10/2026 (570 by 1080, the screen at the page's rest): the title
     with its cap top 163 down, the portrait 314 wide, 225 down and 50 from the right edge,
     under the title, and the bio over the portrait's foot, from 554 down and to 76% of the
     width. Then larger (Leo, the same day): the bio in the fronts' size, 18px, and the title
     in 52 (the frame's 42 was a third smaller than the 10.5vw before), still in three lines. story.js lifts the title and the portrait faster than the scroll from
     the rest, so they leave first. The copy ends above the light bottom of the gradient. */
  .about{height:auto;min-height:100svh;padding:calc(550 * var(--v)) 0 30svh calc(30 * var(--v))}
  .about-title{left:calc(30 * var(--v));top:calc(158 * var(--v));width:calc(500 * var(--v));font-size:calc(52 * var(--v))}
  .about-photo{left:auto;right:calc(50 * var(--v));top:calc(225 * var(--v));width:calc(314 * var(--v));height:auto;aspect-ratio:1022/1364}
  .about-title,.about-text{z-index:4}
  .about-text{position:relative;left:auto;top:auto;width:calc(76vw - 30 * var(--v))}
  .about-copy{font-size:18px}

  /* The bio's column, EDUCAÇÃO included (Leo, 22/10/2026: all three on the left), with the
     cube still where it waits on page 03. */
  .front-text,.front.mirror .front-text{gap:0;width:calc(76vw - 30 * var(--v));margin:0 0 0 calc(30 * var(--v));padding:0}
  /* More room between the title's bar and the paragraph (Leo, 22/10/2026; it was 6px). */
  .front-copy{margin-top:16px;font-size:18px}
  .front-list{width:auto;margin:16px 0 0;padding:0;font-size:14px;text-transform:uppercase}
  /* Leo, 22/10/2026: paragraphs at 18px, the arrow lists in capitals and the titles in Big
     Shoulders Bold like the rest; the bar across their baseline, .845em down the .91em line. */
  .front .block-title{font-family:var(--tall);font-weight:700;letter-spacing:normal}
  .front .block-title::after{top:.768em}

  .closing{--closing-cube-size:min(68vw,31svh);padding:70px 28px}
  .closing-layout,.closing-text{gap:18px;width:100%}
  .closing-copy,.closing-actions{width:auto}
  /* The statement's type (above): its two lines hold from 328 to 464 wide. */
  .closing-title{width:calc(396 * var(--v))}
  .closing-copy{font-size:15px}
  .closing-actions{gap:8px;flex-wrap:wrap}
}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}}