@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}
/* Geist Mono (Vercel, OFL), the BOT view only (Leo, 23/10/2026). Latin subset. */
@font-face{font-family:'Geist Mono';src:url('./assets/fonts/GeistMono-Regular.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Geist Mono';src:url('./assets/fonts/GeistMono-Bold.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap}
/* PP Supply Mono Medium (Pangram Pangram), the loading terminal only (Leo, 24/10/2026), cut to its lines' letters. */
@font-face{font-family:'PP Supply Mono';src:url('./assets/fonts/PPSupplyMono-Medium.woff2') format('woff2');font-weight:500;font-style:normal;font-display:block}

/* --u is one pixel of the 1920x1080 Figma frames, scaled to fit the screen, but never past
   the frame's own size (Leo, 24/10/2026: on a 5K screen, 2560x1440, everything was a third
   larger): from there on the page stays at its size, centred, and the screen around it is
   room. cube-journey.js (frameUnit) holds the same. */
: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),1px);--pu:var(--u);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. No scroll
   anchoring (Safari has none): story.js keeps the visitor in place when the texts change length
   (another language), and Chrome's anchor moved the native scroll under Lenis, so the rebuilt
   lanes started from the wrong place (24/10/2026: MEDIA's title stayed plain on a phone). */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;overflow-anchor:none}
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, ENGENHARIA and CRIATIVA, 3D figure, 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). Tracked
   -5% since 24/10/2026 (Leo: tighter; it was the vector's -2%), on every screen. */
.hero-title{font:400 calc(270.43 * var(--u))/.91 var(--pixel);letter-spacing:-.05em;color:var(--sand);pointer-events:none}
.hero-word{position:absolute;left:0;right:0;text-align:center;white-space:nowrap}
/* Lower and closer since 24/10/2026, evening (Leo: the cube over ENGENHARIA alone, less space between
   the words; cube-journey.js): baselines at 541 and 770, 22 between ENGENHARIA's feet and CRIATIVA's
   caps (it was 48, baselines at 473 and 728), the copy ending clear of the bottom glass (950). */
.hero-back{z-index:1;top:calc(50% - .7182em)}
.hero-front{z-index:1;top:calc(50% + .1287em)}
.hero-line{display:block}
/* Line of copy under the title (Figma frame 01, 2042:602): 788 px down the 1080 frame (830 since 24/10/2026,
   still 60 under CRIATIVA's baseline, ending above the bottom glass), 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% + 290 * 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 (since
   24/10/2026 from 269.5 on the desktop, with the words; CRIATIVA .8468em under ENGENHARIA there, .943em
   on phones, below). */
.hero-back{--ink-from:-.0322em;--ink-to:1.9792em}
.hero-front{--ink-from:-.879em;--ink-to:1.1324em}
.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. From its rest
   (.45 of a screen into the pin, story.js) to the trigger of the glide to 03, 170 px, about two
   wheel notches (Leo, 24/10/2026: "depois de uns dois scrolls a gente passa para a próxima
   página"): the pin is .52 of a screen and 170 px long. */
.media{height:calc(152vh + 170px);height:calc(152svh + 170px);margin-top:-54vh;margin-top:-54svh}
/* Orange kicker of frame 02 (Figma 1994:11618), 23px above the statement. Above
   the statement's reading shade; the windows in front still cross it.
   The kicker and the statement look selected (Leo, 24/10/2026: "parecer que a tipografia está
   selecionada", tight to the type): the kicker in ink on an orange band, the statement in sand
   on an ink band per line, both drawn and typed by type-text.js. */
.media-label{position:absolute;z-index:4;left:0;right:0;top:calc(50% - 219 * var(--u));width:fit-content;margin:0 auto;
  font:900 calc(24 * var(--u))/.91 var(--wide);color:var(--ink);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));color:var(--sand)}
/* The bands of the typed texts (type-text.js, which measures and places them): one behind
   each line, under the letters, and its end past the last typed letter in front (the tail),
   as the next letter starts there. Ink under the orange pages' statement
   and closing title, orange under the kicker, sand under the titles of the green pages, the
   letters in the other colour (Leo's mocks, 24/10/2026). */
.type-layer{position:absolute;inset:0;z-index:-1;pointer-events:none}
.media-copy,.closing-title{--band:var(--ink)}
.media-label{--band:var(--orange)}
.about-title,.block-title{--band:var(--sand)}
.type-band,.type-tail{position:absolute;background:var(--band)}
.type-tail{pointer-events:none}
/* 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%).
   Under the windows behind the statement too, as the ellipse under them in board 18 (it was
   the statement's own ::before, over the cards behind it): an element of its own under them,
   around the statement's four lines (1325 by 4 x 94.35), 30% wider and 70% taller on each
   side, fading in and out with the statement (story.js). */
.media-shade{position:absolute;z-index:0;pointer-events:none;
  left:calc(50% - 1060 * var(--u));top:calc(50% - 438.2 * var(--u));width:calc(2120 * var(--u));height:calc(905.8 * var(--u));
  --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%)}
/* Pop-up windows (Leo, 24/10/2026; Figma LBK 2026, board 18, 2059:1081; popups.js): the same
   chrome on every window, in frame px whatever its size: a 2.334 border, a 17.138 ink bar over a
   2.334 line, and minimize, maximize and close at its right end (lines 2.565 thick: a 10.26 dash,
   a 6.41 square, a 7.9 cross, 7.5 from the edge). The lines in the middle teal, --dot, since
   25/10/2026 (Leo: "teal escuro, não o mais escuro, o médio"; orange in the Figma). Only the width
   (--w, set by popups.js) and the picture's proportion change. In the pin's stacking context:
   behind the statement (3) and the kicker (4), or in front of both (.over). */
.popups{position:absolute;inset:0}
.popup{position:absolute;left:0;top:0;z-index:2;width:calc(var(--w) * var(--pu));border:calc(2.334 * var(--pu)) solid var(--dot);background:var(--ink);will-change:transform}
.popup.over{z-index:5}
.popup[hidden]{display:none}
/* A pseudo-element keeps content-box sizing: 17.138 plus its line. */
.popup::before{content:"";display:block;height:calc(17.138 * var(--pu));border-bottom:calc(2.334 * var(--pu)) solid var(--dot);background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='200 0 45 21.806'%3E%3Cpath d='M201.387 14.11H211.648M216.779 7.696H223.192V14.11H216.779ZM229.609 14.299L237.496 6.415M229.609 6.414L237.493 14.298' fill='none' stroke='%23005c54' stroke-width='2.565'/%3E%3C/svg%3E") no-repeat right calc(-2.334 * var(--pu)) top calc(-2.334 * var(--pu))/calc(45 * var(--pu)) calc(21.806 * var(--pu))}
.popup img{display:block;width:100%;height:auto}

/* 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); MÍDIA, EDUCAÇÃO and SERVIÇOS at
   the bio title's size, tracked -4% as the statement (Leo, 24/10/2026; they were 111.6). */
.block-title{font:700 calc(85 * var(--u))/.91 var(--tall);letter-spacing:-.04em;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}
/* The image arrives in time on top of the frame's scroll lane (story.js ARRIVE); flat since
   24/10/2026, evening (Leo: no perspective under the pointer). A pop-up window too, in teal
   (Leo, 24/10/2026): the windows' chrome (--pu, the frame's pixel, as on page 02) drawn on the
   image itself, so it arrives with it: the 2.334 border, then in the padding above the picture
   the 17.138 ink bar with the icons at its right end and its 2.334 line. */
/* 20% smaller (Leo, 24/10/2026: 728 by 972), its right edge where it was, 61 from the bio
   (the same day: "aproxima um pouco a imagem do bloco de texto"; from its left edge it ended 207 away). */
.about-photo{position:absolute;left:calc(50% - 668.4 * var(--u));top:calc(50% + 114 * var(--u));width:calc(582.4 * var(--u));height:calc(777.6 * var(--u));z-index:3}
.about-photo img{display:block;width:100%;height:100%;object-fit:cover;border:calc(2.334 * var(--pu)) solid var(--teal);padding-top:calc(19.472 * var(--pu));
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='200 0 45 21.806'%3E%3Cpath d='M201.387 14.11H211.648M216.779 7.696H223.192V14.11H216.779ZM229.609 14.299L237.496 6.415M229.609 6.414L237.493 14.298' fill='none' stroke='%23007762' stroke-width='2.565'/%3E%3C/svg%3E") no-repeat right calc(-2.334 * var(--pu)) top calc(-2.334 * var(--pu))/calc(45 * var(--pu)) calc(21.806 * var(--pu)),
    linear-gradient(var(--teal),var(--teal)) 0 calc(17.138 * var(--pu))/100% calc(2.334 * var(--pu)) no-repeat,var(--ink)}
/* The window: the picture and its dithering, which arrive together (story.js). */
.about-photo-window{position:relative;height:100%}
/* The cloud of dithering over the picture (Leo, 24/10/2026, evening; photo-dither.js): inside the
   window's border and bar, cut to the picture, its dots scaled up without smoothing. */
.photo-dither{position:absolute;left:calc(2.334 * var(--pu));right:calc(2.334 * var(--pu));top:calc(21.806 * var(--pu));bottom:calc(2.334 * var(--pu));overflow:hidden;pointer-events:none}
.photo-dither canvas{display:block;image-rendering:pixelated}
/* 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(--ink)}
.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)))}
/* Highlights (Leo, 24/10/2026: "grifar os links e palavras"): the bio's marked words, the
   links in MEDIA and the phrases marked in EDUCATION and SERVICES, on a sand band per line with
   their letters in ink, as the titles; the band grows left to right on each line as the letters
   change colour (--hl, story.js), a beat after the page rests. They were underlined. In the
   paragraph's weight since that evening (Leo: "tire os negritos"; they were Ultrabold, as in
   Figma frame 8): the band alone marks them. A link's band turns orange under the pointer,
   its letters still ink. */
.about-copy strong,.front-copy :is(strong,mark){--hl:0;background:linear-gradient(var(--sand),var(--sand)) 0 0/calc(var(--hl) * 100%) 100% no-repeat;
  color:color-mix(in srgb,var(--ink) calc(var(--hl) * 100%),var(--sand));font-weight:inherit;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.block-copy a{text-decoration:none}
:is(.about-copy,.front-copy) strong:has(a:is(:hover,:focus-visible)){background-image:linear-gradient(var(--orange),var(--orange))}

/* 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}
/* MEDIA, EDUCATION and SERVICES in Big Shoulders Bold like every other title, on every screen
   (Leo, 24/10/2026: the desktop still had the hero's pixel face; "as tipografias, textos,
   links precisam ser iguais sempre", only the layout changes). */
/* Typed on a sand band (type-text.js), which needs the title's own stacking context; the orange
   bar under the word is gone (Leo, 24/10/2026). */
.front-text .block-title{position:relative;isolation:isolate;width:fit-content;color:var(--ink)}
/* A little more room under the title (Leo, 24/10/2026: 12 to 30). */
.front-copy{margin-top:calc(30 * var(--u));font-size:max(16px,calc(32 * var(--u)))}
.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)));text-transform:uppercase}
/* 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. In capitals on
   every screen (Leo, 22/10/2026 on phones; 24/10/2026: the same type everywhere). */
/* One line per item (Leo, 23/10/2026: "Lançamentos e ativações de MARCA" on one line). */
.front-list li{position:relative;padding-left:1.4em;white-space:nowrap}
.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. Title and copy balanced on every screen (Leo,
   24/10/2026, evening: on the desktop too, two words at least on the title's second line and
   the copy in three lines, in 22em as on phones, with "talk to us" whole on the last; TOGETHER
   and "us." were alone, and the Portuguese copy took two lines). */
.closing-title{position:relative;z-index:1;width:calc(800 * var(--u));color:var(--sand);text-wrap:balance}
.closing-copy,.closing-actions{position:relative;z-index:3}
.closing-copy{width:max(320px,calc(576 * var(--u)));max-width:22em;font:500 max(14px,calc(21 * var(--u)))/1.4 var(--body);text-align:center;color:var(--ink);text-wrap:balance}
.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. Blur only since 24/10/2026, evening (Leo: "remova a distorção... mantenha apenas o
   blur"; a ripple bent the strip underneath, in Chromium). */
.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}
/* Our scrollbar (Leo, 24/10/2026; scrollbar.js), over the page at its right edge, above the
   glass: a teal line under a 5px thumb, as wide as it since 24/10/2026, evening (Leo: "a mesma
   grossura da barrinha laranja"; it was 1px), dark teal on every page since 25/10/2026 (Leo: "de
   laranja para o teal escuro"; until then orange, teal on the orange pages). The browser's is
   hidden where a mouse scrolls; touch screens keep theirs. Over the BOT view too since
   25/10/2026 (Leo), following its own scroll (scrollbar.js), the view's own bar hidden. */
@media(pointer:fine){html,.bot-view{scrollbar-width:none}:is(html,.bot-view)::-webkit-scrollbar{display:none}}
.scrollbar.chrome{position:fixed;z-index:5;top:0;right:0;bottom:0;width:12px;cursor:pointer;touch-action:none}
.scrollbar::before{content:"";position:absolute;top:0;bottom:0;right:0;width:5px;background:var(--teal)}
.scrollbar-thumb{position:absolute;top:0;right:0;width:5px;background:var(--ink);cursor:grab}
.scrollbar.dragging .scrollbar-thumb{cursor:grabbing}
@media(pointer:coarse){.scrollbar.chrome{display:none}}
/* The menu (Leo, 24/10/2026; Figma LBK 2026, boards 18, 20 and 21; menu.js): three bars
   29.674 by 4.565, 5.43 apart, 28 from the right edge, beside the language, with square ends
   since 25/10/2026 (Leo: "cantos retos"; rounded in Figma); it opens a dialog over everything in
   the background opposite the page's since 25/10/2026 (Leo: orange over the green pages, green
   over the orange ones; until then the page's own): the green gradient, the orange one over it
   as much as 1 - --warm, and its colours (--fg; the grain too), the items in Big Shoulders Bold at
   the bio title's size (phones: 56.933 of frame 20, on 1.09, tracked -2%), the one under the
   pointer selected, ink band and orange letters on orange, orange band and ink letters on
   green, and the e-mail in ink. The cross: the dialog's own button, the same bars in the same
   place, which turn into it as the menu opens and back as it closes (menu.js). */
.menu-toggle,.menu-close{position:absolute;right:calc(28 * var(--u));top:calc(24 * var(--u));display:flex;flex-direction:column;gap:calc(5.43 * var(--pu));
  padding:8px;margin:-8px;border:0;background:none;color:var(--fg);cursor:pointer}
.menu-toggle span,.menu-close span{display:block;width:calc(29.674 * var(--pu));height:calc(4.565 * var(--pu));background:currentColor}
/* Over the items' layer, which spans the whole dialog (it took the cross's clicks). */
.menu-close{z-index:1}
/* Opened by a tap or a click, the cross takes the focus without its ring (Leo, 25/10/2026: an
   orange border round it on phones); opened from the keyboard, or once Tab moves on, it shows. */
.menu.by-pointer .menu-close:focus-visible{outline:none}
.menu{position:fixed;inset:0;width:100%;height:100%;max-width:none;max-height:none;margin:0;padding:0;border:0;overflow:hidden;
  --warm-mix:calc((1 - 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));color:var(--fg);
  background:linear-gradient(180deg,var(--night) 47.115%,var(--teal) 69.114%,var(--sand) 97.115%)}
.menu::backdrop{background:none}
.menu::before{content:"";position:absolute;inset:0;opacity:calc(1 - var(--warm));background:linear-gradient(180deg,var(--orange),var(--sand) 60%)}
.menu-nav{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:calc(92 * var(--u));height:100%}
.menu-list{margin:0;padding:0;list-style:none;text-align:center;font:700 calc(85 * var(--u))/1.09 var(--tall);letter-spacing:-.02em}
/* The band as the typed titles' (type-text.js): the capitals plus .1em over and .06em under,
   from .0185em down this 1.09 line. */
.menu-list a{display:inline-block;padding:0 .1em;color:inherit;text-decoration:none}
.menu-list a:is(:hover,:focus-visible){outline:none;color:color-mix(in srgb,var(--orange) var(--warm-mix),var(--ink));
  background:linear-gradient(var(--accent),var(--accent)) 0 .0185em/100% .972em no-repeat}
.menu-email{font:700 max(10px,calc(22 * var(--u)))/.85 var(--wide);letter-spacing:-.02em;color:var(--ink);text-decoration:none}
.menu-email:focus-visible{outline-color:var(--ink)}
.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)}
/* 20% larger (Leo, 23/10/2026): 172 to 206.4 of the frame. */
.brand-logo{display:block;width:calc(206.4 * var(--u));min-width:126px;height:auto}
.brand-logo .logo-mark{fill:var(--accent)}
/* Beside the menu since 24/10/2026, in 24 as in Figma board 18 (it was 21). */
.language{position:absolute;right:calc(82 * var(--u));top:calc(21 * var(--u));display:flex;align-items:baseline;
  font:700 max(14px,calc(24 * 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}
/* Middle dots between them and orange under the pointer, teal on the orange pages (Leo, 24/10/2026).
   The one picked stays dark teal there (Leo, 25/10/2026: the bar under it already shows it; a
   tap left it teal on phones, where the pointer stays on it). */
.language button:hover{color:color-mix(in srgb,var(--teal) var(--warm-mix),var(--orange))}
.language button[aria-pressed=true]:hover{color:color-mix(in srgb,var(--ink) var(--warm-mix),var(--orange))}
/* The choice underlined by one bar, thicker than the type's line, that glides easing in and out
   to the one picked (Leo, 25/10/2026; language.js): BOT while its view is open. */
.language-mark{position:absolute;left:0;bottom:.07em;width:0;height:.12em;background:currentColor;pointer-events:none}
.language-mark.glides{transition:translate .5s cubic-bezier(.65,0,.35,1),width .5s cubic-bezier(.65,0,.35,1)}
.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}
/* Leo, 23/10/2026: the e-mail a little smaller (14 to 12), the icons 25% larger (23.6 to
   29.5) and a little further apart (15.46 to 20), each link 6px larger than its icon all
   round, for a finger, without moving it. */
.email{position:absolute;left:calc(25 * var(--u));bottom:calc(27 * var(--u));font:700 max(8px,calc(12 * 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(20 * var(--u));margin:0;padding:0;list-style:none}
.social a{display:block;line-height:0;padding:6px;margin:-6px;color:var(--ink)}
/* Orange under the pointer (Leo, 25/10/2026), the e-mail and the icons: both sit on the sand at
   the foot of every page. Each icon is its SVG as a mask over the link's colour. */
.email,.social a{transition:color .2s}
.email:is(:hover,:focus-visible),.social a:is(:hover,:focus-visible){color:var(--orange)}
.social .icon{display:block;width:max(20px,calc(29.5 * var(--u)));height:max(20px,calc(29.5 * var(--u)));background:currentColor;
  -webkit-mask:center/100% 100% no-repeat;mask:center/100% 100% no-repeat}
.icon.instagram{-webkit-mask-image:url("assets/img/instagram.svg");mask-image:url("assets/img/instagram.svg")}
.icon.spotify{-webkit-mask-image:url("assets/img/spotify.svg");mask-image:url("assets/img/spotify.svg")}
.icon.youtube{-webkit-mask-image:url("assets/img/youtube.svg");mask-image:url("assets/img/youtube.svg")}
.icon.tiktok{-webkit-mask-image:url("assets/img/tiktok.svg");mask-image:url("assets/img/tiktok.svg")}
.icon.linkedin{-webkit-mask-image:url("assets/img/linkedin.svg");mask-image:url("assets/img/linkedin.svg")}

/* Film grain over the whole page, chrome included (Leo, 21/10/2026, after the static on
   ventarisglobal.com.br): a grey turbulence tile, half a 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 (5.75% since 24/10/2026,
   evening: Leo, "aumente em 15"). The offsets are
   wrapped by a tile (240 px) to within half a tile, so the layer needs only half a tile
   past each edge (22/10/2026, 38% less layer on a phone; was 240 px, same pixels). */
.grain{position:fixed;inset:-120px;z-index:20;pointer-events:none;opacity:.0575;
  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") 120px 120px/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(89px,-23px)}50%{transform:translate(58px,-107px)}62.5%{transform:translate(-37px,78px)}
  75%{transform:translate(-71px,64px)}87.5%{transform:translate(-118px,107px)}}

/* BOT (Leo, 23/10/2026; bot-view.js): the page's Markdown as agents read it, in Geist Mono
   on deep teal, with every mark of the syntax kept and tinted orange. Over the page and the
   cube, under the glass and then the logo and the language choice (same z-index, earlier in
   the DOM); the dots and the footer step aside, as the Markdown lists the contacts. */
:root{--deep-teal:#003a33}
.bot-view{position:fixed;inset:0;z-index:4;overflow-y:auto;overscroll-behavior:contain;background:var(--deep-teal);color:var(--sand);outline:none}
.bot-view[hidden]{display:none}
.bot-page{max-width:calc(78ch + 48px);margin:0 auto;padding:max(116px,calc(150 * var(--u))) 24px 96px;font:400 15px/1.7 'Geist Mono',ui-monospace,monospace}
.bot-source{margin:0 0 2em;color:#6fa597}
.bot-text{margin:0;font:inherit;white-space:pre-wrap;overflow-wrap:anywhere;tab-size:2}
.bot-view .md-mark{color:var(--orange)}
.bot-view .md-h{font-weight:700;color:#f3ead7}
.bot-view .md-meta,.bot-view .md-url{color:#6fa597}
.bot-view .md-quote{color:#e3d8bf}
.bot-view strong{font-weight:700;color:#f3ead7}
.bot-view a{color:inherit;text-decoration:underline;text-decoration-color:color-mix(in srgb,currentColor 45%,transparent);text-underline-offset:.2em}
.bot-view a:hover{text-decoration-color:var(--orange)}
html.bot{--fg:var(--sand);--accent:var(--orange)}
/* Its top and bottom fade and blur as the page's do (Leo, 24/10/2026): the glass strips stay
   over it, each ending in its deep teal at the edge of the screen. */
html.bot .glass::after{content:"";position:absolute;inset:0;background:linear-gradient(var(--edge),transparent,var(--deep-teal))}
/* !important: the opening leaves an inline visibility on the chrome. The menu's button stays
   (Leo, 24/10/2026: it went away with BOT). */
html.bot :is(.page-nav,.footbar,.stage,main){visibility:hidden!important}

.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 (Leo, 24/10/2026; Figma LBK 2026, board 19; loader.js): a terminal on the plain dark
   ground, over everything but the grain, the gradient coming in only once it has gone. From
   55 by 61 of the frame (phones: of the 570 frame), the logo drawn in lines, then the lines in
   PP Supply Mono Medium 24.517 on 1.27, tracked -2%, in a dark teal. It fades when done. Logo
   and lines drawn in --tu, the frame's pixel (20% smaller on phones, below). Since 25/10/2026
   (Leo) the logo 20% smaller (100.151 to 80.121) and then the whole terminal, type included,
   20% smaller again (--tu .8 of the frame's pixel, phones .64), from the same corner. */
.loading{position:fixed;z-index:7;inset:0;background:var(--night);pointer-events:none;transition:opacity .45s ease-in}
.terminal{--tu:calc(.8 * var(--pu));position:absolute;left:calc(55 * var(--pu));top:calc(61 * var(--pu));font:500 calc(24.517 * var(--tu))/1.27 'PP Supply Mono',monospace;
  letter-spacing:-.02em;color:#006553;white-space:pre}
.terminal-logo{display:block;width:calc(80.121 * var(--tu));height:auto;margin-bottom:calc(19.8 * var(--tu))}
.terminal p{margin:0}
.terminal p[hidden]{display:none}
.loading.done{opacity:0}
.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 hero words (decrypt-text.js): words stay whole, and an encrypted letter
   keeps the real letter's advance. */
.decrypt-word{white-space:nowrap}
.decrypt-cell{display:inline-block;text-align:center}
/* Every other coded text keeps its own layout: the letters still coded are transparent,
   each under a random glyph drawn in its box (generated content, so not in the text). */
.decrypt-hidden{color:transparent}
.decrypt-layer{position:absolute;inset:0;pointer-events:none}
.decrypt-glyph{position:absolute;text-align:center;white-space:pre}
.decrypt-glyph::before{content:attr(data-glyph)}
.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){
  /* Page 02 too: its pin starts half a screen down, under the counter, and its clips and
     copy show where the CSS lays them out until story.js sends them off screen (Leo,
     23/10/2026: nothing before its own page). */
  html.intro .chrome,html.intro .hero-line,html.intro .hero-copy-line,html.intro .media-pin{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,.media-pin,.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 as on the desktop (Leo, 24/10/2026: in Big Shoulders, the chosen
   one underlined; it was PP Neue Machina, the chosen one orange), at the frames' size. */
@media(max-width:700px),(max-aspect-ratio:4/5){
  /* Glass on phones and portrait tablets (Leo, 22/10/2026: the cube stuttered on an
     iPhone 16 Pro Max): two blur steps in place of four, half the backdrop passes
     redrawn over the moving cube every frame. About 8 px at the screen edge (9 with four). */
  .glass>i:nth-last-child(4),.glass>i:nth-last-child(2){display:none}
  .glass>i:nth-last-child(3){-webkit-mask-image:linear-gradient(var(--edge),transparent 0,#000 50%);mask-image:linear-gradient(var(--edge),transparent 0,#000 50%)}
  .glass>i:nth-last-child(1){-webkit-mask-image:linear-gradient(var(--edge),transparent 50%,#000 100%);mask-image:linear-gradient(var(--edge),transparent 50%,#000 100%)}
  :root{--v:min(calc(100vw / 570),calc(100svh / 1080));--pu:var(--v);--hero-size:min(20.108vw,calc(179 * var(--v)))}
  /* The loading's logo and lines 20% smaller (Leo, 24/10/2026), from the same corner, and
     20% smaller again since 25/10/2026 as on the desktop. */
  .terminal{--tu:calc(.64 * var(--pu))}
  .brand{left:calc(30 * var(--v));top:calc(30 * var(--v))}.brand-logo{width:calc(202.8 * var(--v))}
  /* A little larger (Leo, 24/10/2026: it was 17.291, at least 14px), beside the menu; 20%
     larger again that evening (it was 21, at least 16px). Its line's middle level with the
     menu button's (57.7 down). */
  .language{--size:max(19.2px,calc(25.2 * var(--v)));right:calc(72.7 * var(--v));top:calc(57.7 * var(--v) - .7 * var(--size));font-size:var(--size)}
  /* The menu's button level with the language, and its cross in the same place since it turns
     into it (25/10/2026; it was where boards 20 and 21 have it, 2 right and 16.6 up). */
  .menu-toggle,.menu-close{right:calc(25 * var(--v));top:calc(45.6 * var(--v))}
  .menu-list{font-size:calc(56.933 * var(--v))}
  .menu-nav{gap:calc(62 * var(--v))}
  .menu-email{font-size:calc(16 * var(--v))}
  .bot-page{padding:max(96px,calc(170 * var(--v))) 20px 72px;font-size:13px;line-height:1.65}
  /* Back in the middle of the right edge (Leo, 23/10/2026), as on the desktop. */
  .page-nav{right:calc(25 * var(--v))}
  .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(8px,calc(10.8 * var(--v)))}
  .social{right:calc(30 * var(--v));bottom:calc(30 * var(--v));gap:calc(20 * var(--v))}
  .social .icon{width:max(20px,calc(29.5 * var(--v)));height:max(20px,calc(29.5 * var(--v)))}

  /* ENGENHARIA 2.5% wider than the screen, a little past both edges (Leo: "vai sair da tela nas
     laterais levemente"): 19.098vw at the -2% tracking (ink 5.374em), 20.108vw at -5% (ink 5.104em,
     24/10/2026; cube-journey.js sizes the cube by it too), 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{font-size:var(--hero-size)}
  /* English (language.js): ENGINEERING is 7% wider than ENGENHARIA (5.47em to 5.104em at -5%), 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) * .933)}
  .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);--ink-from:-.9751em;--ink-to:1.0362em}
  /* 14.148 of the frame (floor 11px), its lines as in the frames: 25.87em wide in 11, 32.44em in 12.
     At least 28em since 24/10/2026 (Leo: INDUSTRIES alone on the last line in English, as in
     anything under 27.5em; Portuguese keeps two words there up to 29em), inside a 16px gutter. */
  .hero-copy{left:0;right:0;width:min(32.44em,max(28em,63vw),100vw - 32px);margin:0 auto;text-wrap:pretty;
    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%). */
  .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))}
  /* The reading shade as on the desktop, around five and a half of its lines (461 by 5.5 x
     44.94): English has five, Portuguese six. */
  .media-shade{left:calc(50% - 368.8 * var(--v));top:calc(50% - 331 * var(--v));width:calc(737.6 * var(--v));height:calc(593.2 * var(--v))}

  .block{width:auto;gap:18px}
  .block-title{font-size:calc(52 * var(--v))}
  .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))}
  /* 25% larger again (Leo, 24/10/2026, evening: 251.2, 20% under the frame, that afternoon),
     back to the frame's 314: the bio's first lines run over its foot (the text above it). */
  .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}
  /* Over the portrait, under the glass and the footer (Leo, 23/10/2026: the bio crossed the
     e-mail and the icons; it was 4, the chrome's): the portrait drops to the cube's level. */
  .about-photo{z-index:2}
  .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}
  /* Room between the title's bar and the paragraph: 6px, then 26 (Leo, 22/10/2026: more), then
     18 (Leo, 25/10/2026: "diminua um pouco"). */
  .front-copy{margin-top:18px;font-size:18px}
  /* The list as wide as its longest item, past the paragraph's column (Leo, 23/10/2026: each
     item on one line). That item, arrow included, is 23.4em wide at most (PT and EN): on a
     narrow phone the type shrinks so it ends clear of the page dots. */
  .front-list{width:max-content;margin:16px 0 0;padding:0;font-size:min(14px,calc((100vw - 65 * var(--v) - 16px) / 23.6))}

  .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), in the size of the titles of 04 to 06 since 24/10/2026 (Leo:
     it was the statement's 42): its two lines still fit 396, balanced (Leo, the same day: TOGETHER
     alone on the second line; two words there at least). */
  .closing-title{width:calc(396 * var(--v));font-size:calc(52 * var(--v));text-wrap:balance}
  /* Always three balanced lines (Leo, the same day: "talk to us" whole on the third, never one
     word alone there): at most 22em wide, under two lines' worth of either language (about 48em). */
  .closing-copy{max-width:22em;margin-inline:auto;font-size:15px;text-wrap:balance}
  .closing-actions{gap:8px;flex-wrap:wrap}
}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}}