/* Experience layer: navigation, motion choreography and static fallbacks.
   Visual tokens and reusable content modules: v2-panels.css. */
/* Direct navigation always includes a route to contact. */
html{scroll-padding-top:112px;scrollbar-gutter:stable}
section[id]{scroll-margin-top:0}
.site-header{border-color:var(--line);box-shadow:0 10px 30px rgba(0,0,0,.12)}
.desktop-nav a{position:relative;padding:10px 0;min-height:44px;display:inline-flex;align-items:center}
.desktop-nav a:after{content:"";position:absolute;left:0;right:0;bottom:3px;height:1px;background:var(--accent);transform:scaleX(0);transform-origin:left;transition:transform var(--motion-ui)}
.desktop-nav a:hover:after,.desktop-nav a[aria-current]:after{transform:scaleX(1)}
.header-contact{min-height:44px;align-items:center;border-left:1px solid var(--line);padding-left:24px;font-weight:600}
.mobile-menu a[aria-current]{color:var(--accent)}
.mobile-menu .menu-contact{border-top:1px solid var(--line);margin-top:10px;padding-top:20px;display:flex;justify-content:space-between}
.menu-contact span{color:var(--accent)}
.menu-toggle{min-width:44px;min-height:44px}
.mobile-menu{max-height:calc(100dvh - 120px);overflow-y:auto;overscroll-behavior:contain}
body.menu-open:after{content:"";position:fixed;inset:0;z-index:60;background:rgba(0,0,0,.55)}
/* A complete face and bust on desktop; the approved half-portrait remains on mobile. */
@media(min-width:701px){
 .hero .portrait-stage.has-full .hero-portrait{left:calc(50% + min(27vw,400px));right:auto;transform:translateX(-50%)}
 .motion-ready:not(.intro-done) .has-full .hero-portrait{animation:portrait-concept-enter 1.2s var(--ease) both}
 .hero-copy{padding-right:46%}
 .hero-kicker{white-space:nowrap}
 .hero-shade{background:linear-gradient(90deg,rgba(8,9,8,.42),transparent 62%)}
}
@keyframes portrait-concept-enter{from{opacity:0;transform:translateX(-50%) translateY(16px)}to{opacity:1;transform:translateX(-50%)}}
/* Match the original mobile camera path without animating layout dimensions.
   The final 125% image scales to 80% and moves from the same centred pose. */
@keyframes full-portrait-enter{0%,22%{opacity:0;transform:translate3d(calc(50% - var(--intro-stage-width,100vw) / 2),-10%,0) scale(.8)}48%{opacity:1;transform:translate3d(calc(50% - var(--intro-stage-width,100vw) / 2),-10%,0) scale(.8)}100%{opacity:1;transform:translate3d(50%,0,0) scale(1)}}
@media(max-width:1000px){.header-contact{display:none}}
@media(min-width:701px) and (max-width:1000px){
 .hero h1{font-size:clamp(76px,9.8vw,100px)}
 .hero-role{font-size:25px}
 .hero-lead{font-size:17px}
}
/* One identity: the real words reveal on black, pause, then travel home.
   The same sequence completes in two seconds on the first visit.
   The line is decorative; no duplicated heading or fixed overlay traps input. */
.hero-name-part,.hero-role-part{display:inline-block}
.motion-ready .opening{display:block;position:absolute;inset:0;z-index:2;background:#000;pointer-events:none;animation:none}
body.motion-ready.intro-running .hero-copy{opacity:1;transform:none;pointer-events:none}
body.motion-ready.intro-running .hero-bottom,body.motion-ready.intro-running .site-header{transform:none}
.intro-running .opening{animation:intro-veil var(--intro-duration,2000ms) linear both}
.intro-running .opening i{position:absolute;left:var(--intro-line-x);top:var(--intro-line-y);width:44px;height:2px;margin:0;background:var(--accent);transform-origin:center;animation:intro-line var(--intro-duration,2000ms) ease-in-out both}
.intro-running .hero-name-part,.intro-running .hero-role-part{transform-origin:0 0;will-change:transform,opacity}
.intro-running .hero-name-part{animation:intro-name var(--intro-duration,2000ms) ease-in-out both}
.intro-running .hero-name-part:nth-of-type(2){animation-name:intro-surname}
.intro-running .hero-role-part{animation:intro-role var(--intro-duration,2000ms) ease-in-out both}
.motion-ready:not(.intro-done) .has-full .hero-portrait{transform-origin:50% 100%;will-change:transform,opacity}
body.motion-ready.intro-running .has-full .hero-portrait{animation-delay:calc(var(--intro-duration,2000ms) * .7333333333);animation-duration:calc(var(--intro-duration,2000ms) * .2666666667)}
.intro-running .hero-kicker,.intro-running .hero-lead,.intro-running .hero-button,.intro-running .hero-bottom,.intro-running .site-header,.intro-running .hero h1 .orange-dot{animation:intro-context var(--intro-duration,2000ms) ease-in-out both;pointer-events:none}
@keyframes intro-name{
 0%{opacity:0;transform:translate3d(var(--intro-x,0px),var(--intro-y,0px),0) scale(var(--intro-scale,1))}
 24.4%,73.422223%{opacity:1;transform:translate3d(var(--intro-x,0px),var(--intro-y,0px),0) scale(var(--intro-scale,1))}
 92.617284%,100%{opacity:1;transform:none}
}
@keyframes intro-surname{
 0%{opacity:0;transform:translate3d(var(--intro-x,0px),var(--intro-y,0px),0) scale(var(--intro-scale,1))}
 24.4%,82.281481%{opacity:1;transform:translate3d(var(--intro-x,0px),var(--intro-y,0px),0) scale(var(--intro-scale,1))}
 97.785185%,100%{opacity:1;transform:none}
}
@keyframes intro-role{
 0%,31.177778%{opacity:0;transform:translate3d(var(--intro-x,0px),var(--intro-y,0px),0) scale(var(--intro-scale,1))}
 51.511111%,73.422223%{opacity:1;transform:translate3d(var(--intro-x,0px),var(--intro-y,0px),0) scale(var(--intro-scale,1))}
 97.785185%,100%{opacity:1;transform:none}
}
@keyframes intro-line{0%,18.977778%{opacity:0;transform:scaleX(0)}33.888889%,73.422223%{opacity:1;transform:scaleX(1)}80.804939%,100%{opacity:0;transform:scaleX(.2)}}
@keyframes intro-veil{0%,73.422223%{opacity:1}92.617284%,100%{opacity:0}}
@keyframes intro-context{0%,89.664197%{opacity:0}100%{opacity:1}}
/* The real heading has its own slot, growing from the pupil before docking. */
body.motion-ready #metodo .pupil-title{width:max-content;max-width:100%;position:relative;z-index:6;transform-origin:center;transition:none;will-change:transform,opacity}
body.motion-ready .hero-copy,body.motion-ready .hero-bottom{transition:none}
.hero .iris-detail{transform-origin:center;will-change:transform,opacity;backface-visibility:hidden}
.hero .iris-backdrop{z-index:0}
.hero .iris-macro{position:absolute;z-index:1;width:1280px;height:1280px;opacity:0;visibility:hidden;pointer-events:none;transform-origin:center;backface-visibility:hidden;contain:layout style}
.hero .portrait-stage{z-index:2}
/* Keep the texture under the photographed lids; SVG masks soften both edges. */
.hero .iris-detail svg,.hero .iris-macro svg{display:block;width:100%;height:100%;overflow:visible}
.hero .iris-texture{filter:var(--iris-filter,none)}
/* The macro paints into a screen-sized surface. Its SVG remains a fallback
   when Canvas 2D is unavailable, never a second visible rendering path. */
.hero .iris-macro-canvas{display:none;position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.hero .iris-macro.canvas-ready{transform:none;backface-visibility:visible}
.hero .iris-macro.canvas-ready>.iris-macro-canvas{display:block}
.hero .iris-macro.canvas-ready>svg{display:none}
/* Text remains fully readable; only supporting objects have entrance motion. */
.motion-ready .reveal-pending{transform:translateY(12px)}
.reveal{transition:opacity var(--motion-reveal) var(--ease),transform var(--motion-reveal) var(--ease)}
/* Photographic scenes are managed by v2-depth.js and v2-panels.css. */
/* Results: narrative, centered graphic scene, then the documentary evidence. */
.growth-runway,.growth-stage{position:relative}
.growth-stage .results-grid{display:block;max-width:900px;padding-block:var(--module-space)}
.growth-ready .growth-stage:before{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at 70% 50%,rgba(240,120,56,.065),transparent 55%),var(--surface);border:1px solid var(--line);border-radius:calc(var(--panel-radius) * (1 - var(--growth-expand,0)));clip-path:inset(calc(7vh * (1 - var(--growth-expand,0))) calc(4vw * (1 - var(--growth-expand,0))) round calc(var(--panel-radius) * (1 - var(--growth-expand,0))));opacity:calc(1 - var(--growth-dissolve,0));pointer-events:none}
.growth-ready .numbers-panel{background:transparent;border-color:rgba(245,243,238,calc(.18 * (1 - var(--growth-expand,0))));position:relative;border-radius:var(--panel-radius)}
body.motion-ready .growth-ready{height:240svh;z-index:3}
body.motion-ready .growth-ready .growth-stage{position:sticky;top:0;height:100svh;display:grid;align-items:center;overflow:clip;isolation:isolate}
body.motion-ready .growth-ready .results-grid{position:relative;align-items:center;opacity:calc(1 - var(--growth-dissolve,0));transform:scale(calc(1 + .7 * var(--growth-approach,0)));transform-origin:50% 50%;filter:blur(calc(5px * var(--growth-dissolve,0)))}
/* The next panel keeps its native position in the document and enters behind
   the centred scene. No duplicated text or translated reading surfaces. */
body.motion-ready .growth-ready+.results-metrics{margin-top:-60svh}
body.motion-ready .growth-ready .numbers-panel{transform:scale(calc(1 + .16 * var(--growth-expand,0)));transform-origin:center}
body.motion-ready .growth-ready .growth svg{transform:scale(calc(1 + .8 * var(--growth-expand,0)));transform-origin:100% 0%}
body.motion-ready .growth-ready .chart-guide,body.motion-ready .growth-ready .chart-trail{opacity:calc(1 - var(--growth-expand,0))}
body.motion-ready .growth-ready .chart-labels{opacity:calc(1 - min(1,var(--growth-expand,0) * 2.5))}
/* The qualification stays above the expanding line until the whole scene departs. */
.growth figcaption{margin:0 0 14px}
body.motion-ready .growth-ready .number-note{color:var(--text-secondary)}
.growth-ready .chart-line{stroke:var(--accent);stroke-width:3.5}
.growth-ready .chart-end{fill:var(--paper);stroke:var(--accent)}
/* Travel: the requested transparent reading fill, bright city pins and Europe landing. */
#travel.globe-motion{isolation:isolate;overflow-x:clip}
#travel.globe-layout>.shell{position:relative;z-index:2}
#travel.globe-layout>.shell>.story-copy{max-width:900px;padding:var(--panel-padding);opacity:1}
#travel.globe-motion .travel-runway{height:220svh;margin-top:-40svh;margin-bottom:-48svh;position:relative;z-index:0}
#travel.globe-layout .travel-stage{align-items:start;padding-top:20px;overflow:visible}
#travel.globe-layout .story-visual{transform-origin:50% 50%;will-change:auto}
#travel.globe-pending #globe-container:before{content:"";position:absolute;inset:7%;border-radius:50%;background:radial-gradient(circle at 35% 30%,#23342c,#0a1511 65%,#020605);border:1px solid rgba(230,177,141,.24)}
body.globe-in-view .site-header{background:var(--glass-fill);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
/* Feedback, focus and comfortable targets share one accent. */
.contact input[hidden],.contact select[hidden]{display:none!important}
.contact input:focus,.contact textarea:focus,.contact select:focus{border-bottom-color:var(--accent)}
.contact input,.contact textarea,.contact select,.service summary,.faq summary{scroll-margin-top:112px}
.contact input:-webkit-autofill,.contact textarea:-webkit-autofill{-webkit-text-fill-color:var(--paper);caret-color:var(--paper);-webkit-box-shadow:0 0 0 1000px #161715 inset}
.contact .optional-fields summary{padding:12px 0;border-bottom:1px solid var(--line)}
.contact .optional-fields summary:focus-visible{outline:2px solid var(--accent);outline-offset:4px}
.footer-bottom a,.footer-bottom button{display:inline-flex;align-items:center;min-height:44px}
.footer-bottom>div{align-items:center;flex-wrap:wrap;gap:8px 24px}
#motion-toggle:disabled{opacity:.7;cursor:default;text-decoration:none}
.sticky-contact{left:auto;right:20px;bottom:20px;transform:none;padding:6px;border-radius:var(--panel-radius)}
.sticky-contact>span{display:none}
.sticky-contact>a{min-height:44px;min-width:0;align-items:center;border-radius:calc(var(--panel-radius) - 5px)}
.sticky-contact>a span{flex-shrink:0}
@media(min-width:1001px) and (max-height:760px){
 body.motion-ready .growth-ready .numbers-panel{padding:20px}
 body.motion-ready .growth-ready .big-number{font-size:100px}
 body.motion-ready .growth-ready .growth{margin-top:12px}
 .growth-stage .results-grid{padding-block:24px}
}
@media(max-width:1000px){
 #travel.globe-motion .travel-runway{height:185svh;margin-bottom:-36svh}
 .growth-stage .numbers-panel{max-width:680px;width:100%;margin-inline:auto}
}
@media(max-width:700px){
 /* Use the free space above the shoulder; keep the reading measure to its left.
    Portrait size and the measured eye coordinates stay unchanged. */
 .hero-copy{justify-content:flex-start;padding-top:92px;padding-bottom:96px}
 .hero-kicker{font-size:12px;letter-spacing:.1em;margin-bottom:16px}
 .hero h1{font-size:clamp(56px,16.8vw,78px);line-height:.94;max-width:74%}
 .hero-role{font-size:20px;line-height:1.25;max-width:72%;margin-top:20px}
 .hero-lead{font-size:16px;line-height:1.5;max-width:min(62%,22ch);margin-top:20px;margin-bottom:24px;color:var(--text-secondary)}
 .hero-button{margin-top:auto;flex-shrink:0;min-height:48px;line-height:1.25;padding:12px 16px;gap:16px}
 html{scroll-padding-top:100px}
 body.motion-ready .growth-ready{height:210svh}
 .growth-stage .results-grid{padding-block:24px}
 .results>.shell>.result-copy{font-size:17px}
 .growth-stage .numbers-panel{padding:20px}
 .growth-stage .big-number{font-size:clamp(76px,21vw,110px)}
 .growth-stage .number-note{font-size:12px}
 .growth-stage .growth{margin-top:16px}
 .growth-ready .growth-stage:before{clip-path:inset(calc(3vh * (1 - var(--growth-expand,0))) calc(12px * (1 - var(--growth-expand,0))) round var(--panel-radius))}
 #travel.globe-layout>.shell>.story-copy{padding:var(--panel-padding)}
 .sticky-contact{left:auto;right:16px;bottom:max(12px,env(safe-area-inset-bottom));padding:5px}
 .sticky-contact>a{padding:9px 16px}
 .footer-bottom>div>a{padding-top:0}
}
@media screen and (max-height:700px){
 .hero{min-height:100svh;max-height:none}
 body.motion-ready .growth-ready .results-grid{max-width:760px;padding-block:16px}
 body.motion-ready .growth-ready .numbers-panel{padding:16px 20px}
 body.motion-ready .growth-ready .big-number{font-size:clamp(68px,12vh,100px);margin-block:6px}
 body.motion-ready .growth-ready .growth{margin-top:12px}
 body.motion-ready .growth-ready .growth svg{max-height:22svh}
 body.motion-ready .growth-ready .number-note{font-size:12px;max-width:46ch}
 body.motion-ready .growth-ready .chart-labels,body.motion-ready .growth-ready figcaption{font-size:12px}
}
@media(max-width:700px) and (max-height:700px){
 .hero h1{font-size:clamp(54px,16vw,64px)}
 .hero-role{margin-top:16px}
 .hero-lead{margin-top:18px}
}
@media(min-width:701px) and (max-width:1000px) and (min-height:501px) and (max-height:700px){
 .hero-copy{padding-bottom:104px}
}
/* A very short screen needs native document scrolling to reach every word.
   Mobile also reserves room for the separated CTA and the two bottom lines.
   The eye scene returns automatically when sufficient height is available. */
@media(max-height:500px),(max-width:700px) and (max-height:580px){
 body.motion-ready .hero-track{height:auto;min-height:0}
 body.motion-ready .hero{position:relative;height:auto;min-height:100svh}
 .hero-copy{height:auto;min-height:100svh;padding-block:112px 100px}
}
/* A single state restores complete, normal-flow content immediately. */
html.reduced-motion body .growth-ready,body.motion-ready .growth-ready.growth-static{height:auto}
html.reduced-motion body .growth-ready+.results-metrics,body.motion-ready .growth-static+.results-metrics{margin-top:var(--module-space)}
html.reduced-motion body .growth-ready .growth-stage,body.motion-ready .growth-static .growth-stage{position:relative;height:auto;display:block;overflow:visible}
html.reduced-motion body .growth-ready .growth-stage:before,.growth-static .growth-stage:before{display:none}
html.reduced-motion body .growth-ready .results-grid,html.reduced-motion body .growth-ready .numbers-panel,html.reduced-motion body .growth-ready .growth svg,body.motion-ready .growth-static .results-grid,body.motion-ready .growth-static .numbers-panel,body.motion-ready .growth-static .growth svg{transform:none;opacity:1;filter:none}
html.reduced-motion body .growth-ready .chart-labels,html.reduced-motion body .growth-ready figcaption,html.reduced-motion body .growth-ready .chart-guide,body.motion-ready .growth-static .chart-labels,body.motion-ready .growth-static figcaption,body.motion-ready .growth-static .chart-guide,body.motion-ready .growth-static .chart-trail{opacity:1}
body.motion-ready .growth-static .growth svg{max-height:none}
html.reduced-motion #metodo .pupil-title{transform:none!important;opacity:1!important;will-change:auto}
html.reduced-motion #travel.globe-layout .travel-runway{height:auto;margin:0}
html.reduced-motion #travel.globe-layout .travel-stage{position:relative;height:auto;padding-bottom:60px}
html.reduced-motion #travel.globe-layout .story-visual{transform:none!important;opacity:1!important;will-change:auto!important}
@media(prefers-reduced-motion:reduce){
 body.motion-ready #metodo .pupil-title{transform:none!important;opacity:1!important;will-change:auto}
 #travel.globe-layout .travel-runway{height:auto;margin:0}
 #travel.globe-layout .travel-stage{position:relative;height:auto;padding-bottom:60px}
 #travel.globe-layout .story-visual{transform:none!important;opacity:1!important;will-change:auto!important}
}
/* Keep header and hero geometry stable while scripts load. The head's
   noscript block provides native navigation before paint when JS is disabled. */
@media print{
 .growth-ready,.growth-ready .growth-stage{height:auto!important;position:static!important}
 .growth-ready+.results-metrics{margin-top:var(--module-space)!important}
 .growth-stage:before{display:none}
 .growth-stage *{transform:none!important;opacity:1!important}
 .results-timeline .award{break-inside:avoid}
}
@media(forced-colors:active){.chart-line,.chart-end{stroke:CanvasText}.chart-end{fill:CanvasText}.expand-icon{color:ButtonText}}


/* Second eye: use the existing runway before the Travel reading panel.
   220−40−48 = 220−88svh; page length and following chapters stay in place.
   Source order stays text first; reduced motion and short screens keep it. */
#travel.travel-eye-layout.globe-motion{display:flex;flex-direction:column}
#travel.travel-eye-layout.globe-motion>.travel-runway{order:0;flex:none;width:100%;margin-top:0;margin-bottom:-88svh}
#travel.travel-eye-layout.globe-motion>.shell{order:1;flex:none}
.travel-eye{position:fixed;inset:0;z-index:0;overflow:hidden;pointer-events:none;opacity:0;visibility:hidden;contain:paint}
#travel.globe-layout .story-visual.travel-eye-globe{position:fixed;left:0;top:0}
.travel-eye img{position:absolute;top:0;left:0;max-width:none;object-fit:contain;filter:brightness(.78) saturate(.86);-webkit-mask-image:linear-gradient(#000 80%,transparent 99%);mask-image:linear-gradient(#000 80%,transparent 99%)}
@media(max-width:1000px){#travel.travel-eye-layout.globe-motion>.travel-runway{margin-bottom:-76svh}}
@media(prefers-reduced-motion:reduce){.travel-eye{display:none!important}}
@media(max-height:500px){.travel-eye{display:none!important}}
html.reduced-motion .travel-eye{display:none!important}
@media print{.travel-eye{display:none!important}}

/* Language controls share the approved header and remain native without JS. */
.language-picker{position:relative;flex:none;font-size:13px;letter-spacing:.04em}
.language-picker>summary{display:flex;align-items:center;justify-content:center;gap:6px;min-width:44px;min-height:44px;cursor:pointer;list-style:none;border:0;border-radius:0;background:transparent;box-shadow:none;color:inherit;padding:5px 8px;transition:color var(--motion-ui)}
.language-picker>summary>span{display:inline-block;line-height:1;opacity:.65;transition:transform var(--motion-ui),opacity var(--motion-ui)}
.language-picker>summary:hover,.language-picker[open]>summary{color:var(--accent)}
.language-picker[open]>summary>span{transform:rotate(180deg);opacity:1}
.language-picker>summary::-webkit-details-marker{display:none}
.language-picker>nav{position:absolute;top:calc(100% + 10px);right:0;display:grid;min-width:156px;padding:8px;background:#181916;border:1px solid var(--line);border-radius:8px;box-shadow:0 10px 30px #0004;max-height:70svh;overflow-y:auto}
.language-picker:not([open])>nav{display:none}
.language-picker nav a{min-height:44px;display:flex;align-items:center;padding:8px 12px;text-decoration:none;white-space:nowrap;color:var(--paper)}
.language-picker nav a:hover,.language-picker nav a[aria-current]{color:var(--accent);background:#ffffff08}
.language-list{display:flex;flex-wrap:wrap;gap:8px 24px;padding-block:18px;font-size:14px}
.language-list a{display:inline-flex;align-items:center;min-height:44px;color:inherit;text-decoration:none}
.language-list a[aria-current]{text-decoration:underline;text-decoration-color:var(--accent);text-underline-offset:5px}
.display,.section-heading h2,.story-copy h2,.service-title,.contact-title,.contact-stage-message h2{overflow-wrap:anywhere}
.sticky-contact>span{white-space:normal;min-width:0}
@media(max-width:700px){.nav-actions{gap:10px}.language-picker>summary{padding-inline:6px}.language-list{gap:8px 18px}.sticky-contact>a{white-space:nowrap;max-width:none;gap:10px;flex-shrink:0}.site-footer .footer-bottom>div{gap:8px 20px}}
@media(max-width:360px){.header-contact{font-size:12px;gap:7px}.nav-actions{gap:7px}.site-header{gap:8px}}
@media(prefers-reduced-motion:reduce){.language-picker *{transition:none}}