:root{font-family:Poppins, sans-serif;color:#111114;background:#f2f1f5;font-synthesis:none;text-rendering:optimizeLegibility;font-weight:400;--violet:#5552ff;--ink:#111114;--muted:#62616b;--paper:#f2f1f5}
*{box-sizing:border-box}html{min-width:320px;scroll-behavior:smooth}body{margin:0;min-height:100vh;background:var(--paper)}button,a{-webkit-tap-highlight-color:transparent}a{color:inherit;text-decoration:none}
.preview-bar{min-height:38px;padding:6px clamp(16px,4vw,64px);display:flex;align-items:center;justify-content:space-between;gap:16px;background:#16161a;color:#fff;font-size:10px;letter-spacing:.13em}.preview-choices{display:flex;gap:6px}.preview-choice{border:1px solid #ffffff40;border-radius:999px;padding:6px 12px;background:transparent;color:#eee;font:500 10px Poppins,sans-serif;letter-spacing:.03em;cursor:pointer}.preview-choice.is-active{background:#fff;color:#151519}
.hero{position:relative;isolation:isolate;min-height:min(920px,calc(100svh - 38px));overflow:hidden;padding:28px clamp(24px,5.4vw,110px) 0;background:#eeedf1}.hero-backdrop{position:absolute;inset:0;z-index:-2;background:#eeedf1;transition:background .5s ease}.variant-two .hero-backdrop{background:linear-gradient(108deg,#eeedf1 0%,#eeedf1 48%,#d8d6f3 48%,#d8d6f3 100%)}.hero-glow{position:absolute;z-index:0;top:0;left:0;width:640px;height:640px;margin:-320px 0 0 -320px;border-radius:50%;pointer-events:none;background-image:radial-gradient(circle,#6e64ff6b,#6e64ff29 40%,#6e64ff00 70%);will-change:transform}
.site-header{position:relative;z-index:5;width:min(100%,1320px);height:76px;margin:0 auto;display:flex;align-items:center;gap:clamp(30px,5vw,96px);padding:0 28px 0 38px;border:1px solid #e9e8ec;border-radius:999px;background:rgba(255,255,255,.94);box-shadow:0 14px 38px #29233e0b;backdrop-filter:blur(18px)}.brand{width:44px;height:44px;display:grid;place-items:center;flex:0 0 auto}.brand img{display:block;width:37px;height:35px;filter:brightness(0)}.main-nav{display:flex;align-items:center;gap:38px}.main-nav a,.availability{font-size:14px;white-space:nowrap}.main-nav a{transition:color .2s}.main-nav a:hover{color:var(--violet)}.nav-right{margin-left:auto;display:flex;align-items:center;gap:26px}.availability{display:flex;align-items:center;gap:10px}.availability i{width:10px;height:10px;border-radius:50%;background:#18bd69;box-shadow:0 0 0 5px #18bd691c}.nav-cta{display:grid;place-items:center;min-width:130px;height:48px;padding:0 24px;border-radius:999px;background:#111;color:#fff;font-size:14px;font-weight:500;transition:transform .2s,background .2s}.nav-cta:hover{transform:translateY(-2px);background:var(--violet)}.menu-button{display:none}
.hero-content{position:relative;z-index:1;width:min(100%,1320px);min-height:calc(min(920px,100svh - 38px) - 128px);margin:0 auto;display:grid;grid-template-columns:minmax(400px,.94fr) minmax(520px,1.06fr);align-items:center}.intro{position:relative;z-index:3;align-self:center;padding:20px 0 40px;max-width:620px}.eyebrow{margin:0 0 34px;color:#696872;font-size:15px;letter-spacing:.015em}.intro h1{max-width:630px;margin:0;font-size:clamp(28px,2.08vw,42px);font-weight:500;line-height:1.48;letter-spacing:-.045em}.intro h1 em{color:var(--violet);font-style:normal}.project-card{width:min(330px,90%);min-height:194px;margin-top:62px;padding:25px 28px 22px;display:flex;flex-direction:column;align-items:flex-start;border:1px solid #ffffffb8;border-radius:22px;background:#ffffffeb;box-shadow:0 18px 48px #30285812;transition:transform .25s,box-shadow .25s}.project-card:hover{transform:translateY(-4px);box-shadow:0 22px 52px #30285820}.card-heading{font-size:18px;font-weight:600}.card-description{margin-top:11px;color:var(--muted);font-size:14px}.card-action{display:flex;align-items:center;justify-content:space-between;gap:30px;margin-top:18px;min-width:220px;padding:12px 18px;border-radius:999px;background:#f0efff;color:var(--violet);font-size:15px}.card-action b{font-size:21px;font-weight:400}
.name-ghost{position:absolute;z-index:1;inset:0;overflow:hidden;white-space:nowrap;color:#eeedf1;font-size:clamp(112px,17vw,270px);font-weight:600;line-height:.74;letter-spacing:-.095em;pointer-events:none}.name-ghost span{position:absolute}.name-one{left:-4%;bottom:0}.name-two{right:-2%;top:8%}.portrait-scene{position:relative;z-index:2;align-self:stretch;min-height:650px}.hero-mark{position:absolute;z-index:1;width:min(48vh,470px);height:min(36vh,353px);bottom:13%;left:50%;transform:translateX(-50%);pointer-events:none;background:#eeedf1;-webkit-mask:url("../images/home-hero-mark.svg") center/contain no-repeat;mask:url("../images/home-hero-mark.svg") center/contain no-repeat}.portrait{position:absolute;z-index:2;bottom:0;left:50%;height:min(78vh,700px);width:auto;max-width:68%;object-fit:contain;object-position:center bottom;transform:translateX(-51%);filter:none}.stats{position:absolute;z-index:3;top:21%;right:-4%;width:48%;height:56%;min-width:420px;pointer-events:none}.stat{position:absolute;width:31%;min-height:220px;padding:25px 26px 20px;border:1px solid #ffffffd9;border-radius:21px;background:#ffffffed;box-shadow:0 20px 52px #29233e12}.stat p{margin:0;font-size:15px;line-height:1.45}.stat i{display:block;width:42px;height:4px;margin:20px 0 28px;border-radius:4px;background:var(--violet)}.stat strong{font-size:clamp(42px,4.2vw,64px);font-weight:500;line-height:.95;letter-spacing:-.06em}.stat-projects{left:0;top:0}.stat-sectors{left:33%;top:27%}.stat-years{left:66%;top:54%}.variant-two .name-two{color:#d8d6f3}.variant-two .hero-mark{background:#d8d6f3}
.language-switch{position:absolute;z-index:6;right:clamp(24px,5.4vw,110px);bottom:9%;display:flex;align-items:center;gap:4px;padding:5px;border:1px solid #fff;border-radius:999px;background:#ffffffeb;box-shadow:0 12px 36px #26233412}.language-option{width:44px;height:44px;border:0;border-radius:50%;background:transparent;color:#55545f;font:500 13px Poppins,sans-serif;cursor:pointer}.language-option.is-active{background:#111;color:#fff}.next-section{position:absolute;z-index:4;right:-2%;bottom:-70px;left:-2%;height:125px;display:flex;align-items:center;justify-content:center;border-radius:70px 70px 0 0;background:#fff;color:#5552ff;font-size:17px;letter-spacing:.02em}.next-section span{transform:translateY(-23px)}
@media(max-width:1100px){.hero{padding-inline:32px}.site-header{gap:32px}.main-nav{gap:24px}.nav-right{gap:16px}.hero-content{grid-template-columns:minmax(330px,.88fr) minmax(440px,1.12fr)}.intro h1{font-size:clamp(28px,3vw,38px)}.portrait-scene{min-height:600px}.hero-mark{width:400px}.portrait{height:min(72vh,650px);max-width:75%}.stats{right:-10%;transform:scale(.82);transform-origin:top right}.stat{min-height:195px;padding:22px}.project-card{margin-top:42px}}
@media(max-width:760px){.preview-bar{align-items:flex-start;flex-direction:column;gap:7px;padding:8px 14px;font-size:9px}.preview-choices{width:100%}.preview-choice{flex:1;padding:6px 8px}.hero{min-height:calc(100svh - 68px);padding:16px 18px 0}.site-header{height:62px;padding:0 15px 0 19px;gap:0}.brand{width:42px}.brand img{width:34px}.main-nav,.availability{display:none}.nav-right{margin-left:auto}.nav-cta{min-width:102px;height:42px;padding:0 17px;font-size:13px}.menu-button{width:35px;height:35px;margin-left:12px;padding:8px 5px;display:flex;flex-direction:column;justify-content:center;gap:6px;border:0;background:transparent}.menu-button span{height:2px;width:22px;border-radius:2px;background:#111}.hero-content{min-height:calc(100svh - 150px);display:block;padding-top:34px}.intro{max-width:580px;padding:0}.eyebrow{margin-bottom:13px;font-size:13px}.intro h1{max-width:570px;font-size:clamp(25px,6.2vw,38px);line-height:1.37;letter-spacing:-.05em}.project-card{position:absolute;z-index:4;top:clamp(205px,37vh,300px);left:0;width:min(260px,68vw);min-height:148px;margin:0;padding:17px 18px;border-radius:18px}.card-heading{font-size:15px}.card-description{margin-top:6px;font-size:12px}.card-action{min-width:180px;margin-top:11px;padding:9px 13px;font-size:13px}.portrait-scene{position:absolute;inset:0;min-height:0;pointer-events:none}.hero-mark{width:min(78vw,340px);bottom:10%;left:59%}.portrait{height:min(59vh,540px);max-width:84%;left:59%;bottom:0;transform:translateX(-50%)}.name-ghost{font-size:clamp(90px,23vw,160px);line-height:.8}.name-one{left:-4%;bottom:7%}.name-two{right:-31%;top:26%}.stats{top:auto;right:-1%;bottom:11%;width:53%;height:36%;min-width:0;transform:none}.stat{width:43%;min-height:105px;padding:11px 12px;border-radius:15px}.stat p{font-size:10px;line-height:1.35}.stat i{width:28px;height:3px;margin:8px 0 11px}.stat strong{font-size:clamp(27px,8vw,43px)}.stat-projects{left:0;top:0}.stat-sectors{left:44%;top:29%}.stat-years{left:0;top:58%}.language-switch{right:18px;bottom:7%;padding:3px;gap:1px}.language-option{width:36px;height:36px;font-size:11px}.next-section{right:-5%;left:-5%;bottom:-52px;height:83px;border-radius:45px 45px 0 0;font-size:13px}.next-section span{transform:translateY(-9px)}}
@media(max-width:390px){.hero{padding-inline:14px}.hero-content{padding-top:26px}.intro h1{font-size:25px}.portrait{height:55vh;max-width:93%;left:63%}.project-card{top:clamp(205px,37vh,255px);width:68vw}.stats{width:55%;right:-3%;bottom:10%}.stat{width:47%;padding:10px}.stat-sectors{left:46%}.stat-years{top:58%}.language-switch{right:13px;bottom:6%}.name-ghost{font-size:23vw}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;transition:none!important}}

/* Final composition overrides: preserve the current site's own type and proportions. */
@font-face{font-family:"Rethink Sans";src:url("../fonts/RethinkSans-VariableFont_wght.ttf") format("truetype");font-style:normal;font-weight:300 700;font-display:swap}
@font-face{font-family:"Space Grotesk";src:url("../fonts/SpaceGrotesk-VariableFont_wght.ttf") format("truetype");font-style:normal;font-weight:300 700;font-display:swap}
:root{font-family:"Rethink Sans",sans-serif}body,.preview-choice,.language-option{font-family:"Rethink Sans",sans-serif}.hero{min-height:min(988px,calc(100svh - 38px))}.site-header{width:min(100%,1288px)}.hero-content{width:min(100%,1675px);grid-template-columns:42% 58%;min-height:calc(min(988px,100svh - 38px) - 128px)}
.intro h1{font-family:"Rethink Sans",sans-serif;font-size:clamp(30px,2.25vw,44px);line-height:1.3;font-weight:500;letter-spacing:-.045em}.eyebrow{font-size:clamp(14px,1vw,17px)}.card-heading{font-size:clamp(16px,1.05vw,20px)}.card-description{font-size:clamp(13px,.85vw,16px)}.card-action{font-size:clamp(14px,.9vw,17px)}
.name-ghost{color:#eeedf1;font-size:clamp(150px,18vw,340px);font-weight:600}.name-one{left:-2%;bottom:-1%}.name-two{right:-1%;top:13%;color:#eeedf1}.portrait-scene{min-height:650px}.hero-mark{background:#eeedf1}.portrait{left:18%;height:clamp(500px,68vh,720px);max-width:none}.stats{left:65%;right:auto;top:21%;width:37%;height:57%;min-width:0}.stat{width:31%;min-height:clamp(176px,17vw,250px);padding:clamp(18px,1.4vw,28px);border-radius:clamp(16px,1.15vw,23px)}.stat p{font-size:clamp(13px,.95vw,17px)}.stat i{margin:clamp(14px,1.1vw,22px) 0 clamp(20px,1.55vw,32px)}.stat strong{font-size:clamp(42px,4.25vw,68px)}.stat-projects{left:0;top:0}.stat-sectors{left:33%;top:27%}.stat-years{left:66%;top:54%}.language-switch{bottom:8%;right:clamp(24px,5.4vw,110px)}
.variant-two .hero-backdrop{background:linear-gradient(108deg,#eeedf1 0%,#eeedf1 48%,#d8d6f3 48%,#d8d6f3 100%)}.variant-two .name-two,.variant-two .hero-mark{color:#d8d6f3;background:#d8d6f3}
@media(max-width:1450px) and (min-width:761px){.hero{padding-inline:5vw}.hero-content{grid-template-columns:42% 58%}.portrait{left:25%;height:clamp(450px,68vh,620px)}.hero-mark{width:340px;height:270px;bottom:12%;left:30%}.stats{left:70%;width:30%;top:21%}.stat{width:31%;min-height:clamp(160px,16vw,205px);padding:clamp(14px,1.4vw,22px)}.stat p{font-size:clamp(12px,.95vw,15px)}.stat strong{font-size:clamp(38px,4.25vw,58px)}.name-ghost{font-size:clamp(130px,17vw,260px)}}
@media(min-width:1451px){.name-ghost{overflow:visible;font-size:clamp(150px,14vw,270px)}.name-one{left:clamp(-170px,-8vw,-70px);bottom:0}.name-two{right:clamp(-170px,-8vw,-70px);top:3%}.hero-content{overflow:visible}}
@media(min-width:761px){.language-switch{bottom:3%}}
/* Match the reference card proportions; anchor each statistic to the lower edge. */
.project-card{width:clamp(185px,16.2vw,330px);min-height:clamp(110px,9.7vw,194px);padding:clamp(14px,1.4vw,28px);border-radius:clamp(14px,1.2vw,22px);margin-top:clamp(40px,5.4vw,62px)}.card-heading{font-size:clamp(16px,1.05vw,20px)}.card-description{font-size:clamp(12px,.85vw,16px);margin-top:clamp(5px,.6vw,11px)}.card-action{min-width:clamp(125px,11vw,220px);margin-top:clamp(9px,.9vw,18px);padding:clamp(8px,.6vw,12px) clamp(13px,1vw,18px);font-size:clamp(13px,.9vw,17px)}.stats{height:57%}.stat{display:flex;flex-direction:column;width:clamp(109px,9.6vw,195px);min-height:clamp(138px,25.6vh,230px);padding:clamp(14px,1.4vw,28px);border-radius:clamp(13px,1.2vw,21px)}.stat p{font-size:clamp(12px,.95vw,17px)}.stat i{flex:0 0 auto;margin:clamp(12px,1.1vw,20px) 0 0}.stat strong{margin-top:auto;font-size:clamp(40px,3.4vw,68px)}
@media(max-width:1450px) and (min-width:761px){.stat{width:clamp(109px,9.6vw,139px);min-height:clamp(138px,25.6vh,205px)}.project-card{width:clamp(185px,16.2vw,235px);min-height:clamp(110px,9.7vw,141px)}}
@media(max-width:760px){.project-card{width:min(260px,68vw);min-height:148px;padding:17px 18px;border-radius:18px;margin-top:0}.card-action{min-width:180px;margin-top:11px;padding:9px 13px}.stat{width:43%;min-height:105px;padding:11px 12px;border-radius:15px}.stat i{margin:8px 0 0}.stat strong{font-size:clamp(27px,8vw,43px)}}
/* Keep the full portrait visible; center the monogram on the portrait axis. */
@media(min-width:761px){.hero-mark{left:18%}.portrait{height:clamp(380px,66vh,559px);bottom:clamp(32px,4vh,46px)}.name-ghost{font-size:clamp(100px,9vw,190px)}.name-one{bottom:0}.name-two{top:clamp(-85px,-5vw,-48px)}.next-section{bottom:-90px}}
@media(max-width:1450px) and (min-width:761px){.hero-mark{left:25%}.portrait{height:clamp(380px,66vh,559px)}}
@media(max-width:760px){.hero-mark{left:59%}.portrait{height:min(58vh,520px);bottom:31px}.name-ghost{font-size:clamp(80px,20vw,145px)}.name-one{bottom:6%}.name-two{top:21%;right:-24%}.next-section{bottom:-52px}}
@media(max-width:760px){.hero{min-height:calc(100svh - 68px);padding:16px 18px 0}.hero-content{width:100%;min-height:calc(100svh - 150px);padding-top:34px}.intro h1{font-size:clamp(26px,6.5vw,39px);line-height:1.3}.portrait{left:59%;height:min(58vh,520px);max-width:none}.hero-mark{width:min(78vw,340px);height:min(59vw,255px);left:59%;bottom:10%}.stats{left:auto;right:-1%;top:auto;bottom:11%;width:53%;height:36%;min-width:0}.stat{width:43%;min-height:105px;padding:11px 12px}.stat p{font-size:10px}.stat i{margin:8px 0 11px}.stat strong{font-size:clamp(27px,8vw,43px)}.name-ghost{font-size:clamp(90px,23vw,160px)}.name-one{left:-4%;bottom:7%}.name-two{right:-31%;top:26%;color:#eeedf1}.language-switch{right:18px;bottom:7%}.variant-two .name-two{color:#d8d6f3}.variant-two .hero-mark{background:#d8d6f3}}
@media(max-width:390px){.portrait{height:55vh;left:63%}.hero-mark{left:63%}.stats{width:55%;right:-3%}.name-ghost{font-size:23vw}}

/* The preview toolbar is removed; use the full viewport and let the next section peek in by 10px. */
@media(min-width:761px){
  .hero{height:100svh;min-height:0}
  .hero-content{min-height:calc(100svh - 72px)}
  .hero-mark{bottom:10px}
  .portrait{bottom:10px}
  .next-section{bottom:-115px}
}
@media(max-width:760px){
  .hero{height:100svh;min-height:0;padding-top:0}
  .hero-content{min-height:calc(100svh - 104px)}
}

/* Match the reference composition while retaining the WordPress navigation component. */
.hero{padding-top:0}
.hero>.am-nav{width:calc(100vw - 40px);max-width:1200px}
@media(min-width:761px){
  .hero-content{overflow:visible}
  .intro h1{max-width:clamp(350px,29vw,520px);font-size:clamp(20px,1.65vw,36px);line-height:1.24;letter-spacing:-.055em}
  .eyebrow{font-size:clamp(12px,.85vw,15px);margin-bottom:clamp(18px,2vw,28px)}
  .name-ghost{overflow:visible;font-size:clamp(150px,14vw,270px);letter-spacing:-.065em}
  .name-one{left:-6%;bottom:0}
  .name-two{right:-23%;top:9%}
  .hero-mark{left:25%;width:clamp(307px,53.5vh,452px);height:auto;aspect-ratio:1.26;bottom:7%}
}
@media(max-width:760px){.hero{padding-top:0}}

/* The hero fills the available screen; the original photo scales inside it. */
@media(min-width:761px){
  .hero{height:calc(100svh - 38px);min-height:0}
  .hero-content{min-height:calc(100svh - 127px)}
  .portrait-scene{min-height:0}
  .portrait{height:min(66vh,559px);bottom:clamp(38px,4.6vh,52px)}
  .hero-glow{width:640px;height:640px;margin:-320px 0 0 -320px}
  .hero>.am-nav{left:50%;transform:translateX(-50%);margin-left:0;margin-right:0}
}
@media(max-width:760px){
  .hero{height:calc(100svh - 68px);min-height:0}
  .hero-content{min-height:calc(100svh - 184px)}
  .hero-glow{width:480px;height:480px;margin:-240px 0 0 -240px}
}
@media(min-width:761px){
  .hero>.am-nav{left:auto;transform:none;margin-left:calc((100vw - min(1200px,100vw - 40px))/2 - 5vw);margin-right:0}
  .project-card{margin-top:clamp(28px,3.7vw,48px)}
  .card-heading{font-size:clamp(14px,.95vw,18px)}
  .card-description{font-size:clamp(10px,.8vw,14px);white-space:nowrap}
  .card-action{font-size:clamp(12px,.78vw,15px)}
}
@media(max-width:760px){.hero>.am-nav{left:auto;transform:none;margin-left:2px;margin-right:0}}
.desktop-break{display:block}
@media(max-width:760px){.desktop-break{display:none}}
.hero-glow{opacity:0;transition:opacity .25s ease}
.hero.is-glowing .hero-glow{opacity:1}
.hero-glow{background-image:radial-gradient(circle,#6e64ff6b,#6e64ff29 40%,#6e64ff00 70%)}
.variant-two .hero-backdrop,.variant-two .name-two,.variant-two .hero-mark{color:#eeedf1;background:#eeedf1}
.variant-two .hero-glow{background-image:radial-gradient(circle,#625bff80,#6e64ff35 42%,#6e64ff00 72%)}

/* Final viewport anchoring (placed last so earlier preview experiments cannot override it). */
@media(min-width:761px){
  .hero{height:100svh;min-height:0}
  .hero-content{min-height:calc(100svh - 55px)}
  .hero-mark,.portrait{bottom:10px}
  .next-section{bottom:-115px}
}
@media(max-width:760px){
  .hero{height:100svh;min-height:0}
  .hero-content{min-height:calc(100svh - 72px)}
}

/* Desktop proportions at the 100% viewport: show the full source image and center the AM behind it. */
@media(min-width:761px){
  .hero-content{min-height:calc(100svh - 55px)}
  .portrait{height:min(559px,calc(100svh - 100px));min-height:0;max-height:559px;max-width:none;bottom:0;object-fit:contain}
  .hero-content{z-index:2}
  .hero-glow{z-index:0}
  .hero-mark{z-index:1;left:66.25%;top:min(59.5vh,788px);bottom:auto;width:min(28vw,509px);height:auto;aspect-ratio:509.377 / 382.862;transform:none;background:#efeff1;-webkit-mask:url("../images/home-hero-mark.svg") center/contain no-repeat;mask:url("../images/home-hero-mark.svg") center/contain no-repeat}
  .language-switch{right:clamp(20px,5.4vw,110px);bottom:3%;gap:2px;padding:3px}
  .language-option{width:36px;height:36px;font-size:12px}
  .next-section{height:80px;bottom:-70px}
}
@media(max-width:760px){.hero-content{z-index:2}.hero-glow{z-index:0}.hero-mark{z-index:1;left:50%;top:43%;bottom:auto;width:min(74vw,340px);height:auto;aspect-ratio:509.377 / 382.862;transform:translateX(-50%);background:#efeff1;-webkit-mask:url("../images/home-hero-mark.svg") center/contain no-repeat;mask:url("../images/home-hero-mark.svg") center/contain no-repeat}}
.hero,.hero-backdrop{background-color:#efeff1}.name-ghost{color:#efeff1}.variant-two .hero-backdrop{background:#efeff1}.variant-two .hero-mark{background:#efeff1}

/* Figma frame 4786:1416, scaled to the viewport; the red guides define the centered content area. */
@media(min-width:761px){
  .hero{height:100svh;min-height:0;padding:0;overflow:hidden;background:#efeff1}
  .hero-backdrop{background:#efeff1}
  .hero-content{position:absolute;inset:0;width:100%;max-width:none;height:100%;min-height:0;margin:0;display:block;z-index:2;overflow:visible}
  .hero-glow{z-index:0;top:0;left:0}
  .hero-mark{z-index:1;left:66.25%;top:39.69%;bottom:auto;width:min(17.83vw,509px);height:auto;aspect-ratio:509.377 / 382.862;transform:none;background:#efeff1;-webkit-mask:url("../images/home-hero-mark.svg") center/contain no-repeat;mask:url("../images/home-hero-mark.svg") center/contain no-repeat}
  .name-ghost{inset:0;color:#efeff1;font-size:6.74vw;line-height:1;letter-spacing:-.04em;overflow:hidden}
  .name-one{left:13.59%;top:56.56%;bottom:auto;font-size:7.6vw;letter-spacing:-.304vw}
  .name-two{left:62.43%;right:auto;top:12.59%;font-size:6.74vw;letter-spacing:-.27vw}
  .intro{position:absolute;left:12.75%;top:min(32.2vh,296px);width:min(26.4vw,538px);max-width:none;padding:0;transform:none;z-index:3}
  .eyebrow{margin:0 0 clamp(10px,1.3vw,24px);font-size:clamp(16px,.9vw,21px);line-height:1.49;letter-spacing:.01em}
  .intro h1{width:100%;max-width:none;margin:0;font-size:clamp(22px,1.55vw,30px);font-weight:500;line-height:1.61;letter-spacing:-.01em}
  .project-card{width:min(15.6vw,304.4px);min-width:220px;min-height:0;aspect-ratio:1.676;margin-top:clamp(34px,3.6vw,68px);padding:clamp(15px,.9vw,25px);border-radius:clamp(14px,.6vw,17.2px)}
  .card-heading{font-size:clamp(16px,1.1vw,21px);line-height:1;font-weight:600;letter-spacing:-.01em}
  .card-description{margin-top:clamp(7px,.62vw,15px);font-size:clamp(12px,.82vw,15px);line-height:1.49;letter-spacing:.01em;white-space:nowrap}
  .card-action{box-sizing:border-box;width:min(13vw,245px);min-width:165px;height:clamp(40px,2.75vw,52.4px);margin-top:clamp(10px,.9vw,17.5px);padding-inline:clamp(13px,1vw,20px);gap:6px;font-size:clamp(13px,.9vw,17.2px);line-height:1.49}
  .card-action b{font-size:clamp(13px,.8vw,23px)}
  .portrait-scene{position:absolute;inset:0;z-index:2;min-height:0;pointer-events:none}
  .portrait{top:min(32.3vh,296px);bottom:auto;left:48.5%;height:clamp(430px,63vh,613.3px);width:auto;max-width:none;object-fit:contain;object-position:center;transform:translateX(-50%)}
  .stats{position:absolute;inset:0;z-index:3;width:100%;height:100%;min-width:0;pointer-events:none;transform:none}
  .stat{display:flex;flex-direction:column;width:clamp(116px,7.8vw,150px);height:auto;min-height:0;aspect-ratio:150.011 / 195.447;padding:clamp(14px,.87vw,24.9px);border-radius:clamp(12px,.505vw,14.4px)}
  .stat p{font-size:clamp(13px,.79vw,15px);line-height:1.35;letter-spacing:.01em}
  .stat i{flex:0 0 auto;width:clamp(28px,1.21vw,34.6px);height:3px;margin:clamp(10px,.87vw,25px) 0 0;border-radius:999px}
  .stat strong{margin-top:auto;font-size:clamp(44px,2.85vw,54.1px);font-weight:500;line-height:1;letter-spacing:-.06em}
  .stat-projects{left:62.6%;top:min(32vh,303px)}
  .stat-sectors{left:71.2%;top:min(43.9vh,416px)}
  .stat-years{left:79.7%;top:min(55.8vh,530px)}
  .next-section{top:min(95.5vh,909px);bottom:auto;height:calc(100svh - min(95.5svh,909px) + 100px);right:-2%;left:-2%;border-radius:68px 68px 0 0}
  .next-section span{display:none}
  .language-switch{right:clamp(20px,5.4vw,110px);bottom:3%;gap:2px;padding:3px}
  .language-option{width:36px;height:36px;font-size:12px}
}
/* Keep the real WordPress header centered on the viewport, as in the Figma frame. */
@media(min-width:761px){
  .hero>.am-nav{position:sticky;left:auto;right:auto;transform:none;width:min(1200px,calc(100vw - 40px));max-width:1200px;margin:20px auto 0}
}
/* The AM mark intentionally breaks past the content column and sits on the hero's lower edge. */
@media(min-width:761px){
  .hero-mark{left:60.3%;top:auto;bottom:-4.5vh;width:clamp(360px,30.15vw,551px);height:auto;aspect-ratio:509.377 / 382.862;transform:none}
}
/* Oversized name layers follow the viewport edges, outside the centered content guides. */
@media(min-width:761px){
  .name-one{left:0;top:auto;bottom:0;font-size:clamp(120px,8.35vw,220px);line-height:.82;letter-spacing:-.045em}
  .name-two{left:auto;right:0;top:2%;font-size:clamp(120px,8.35vw,220px);line-height:.82;letter-spacing:-.045em}
}
/* Match Figma typography and anchor the artwork to the section transition. */
@media(min-width:761px){
  .hero-mark{left:66.25%;top:auto;bottom:calc(100% - min(95.5vh,909px));width:clamp(360px,17.78vw,509.38px);height:auto;aspect-ratio:509.377 / 382.862}
  .name-one{left:3.5%;top:auto;bottom:calc(100% - min(95.5vh,909px) - 24px);font-size:217.02px;line-height:212.998px;letter-spacing:-8.6808px}
  .name-two{left:62.23%;right:auto;top:clamp(112px,5.82vw,167px);font-size:192.425px;line-height:188.858px;letter-spacing:-7.697px}
  .hero::after{content:"";position:absolute;z-index:1;pointer-events:none;left:-2%;right:-2%;top:calc(min(95.5vh,909px) - 87px);height:182px;background:linear-gradient(to bottom,transparent,#d9d9d9)}
}
/* Keep the working composition inside the same centered 1200px column as the WP header. */
@media(min-width:761px){
  .hero-content{left:50%;right:auto;width:min(1200px,calc(100vw - 40px));transform:translateX(-50%)}
  .intro{left:0;width:min(44.83%,538px)}
  .intro h1{width:100%;max-width:none}
  .portrait{left:50%}
  .stat-projects{left:69%}
  .stat-sectors{left:78.25%}
  .stat-years{left:87.5%}
  .name-ghost{inset:0}
  .name-one{left:3.5%;bottom:calc(100% - min(95.5vh,909px) - 36px)}
}
@media(min-width:761px) and (max-width:1400px){
  .desktop-break{display:none}
  .intro{width:48%}
  .intro h1{font-size:clamp(20px,1.9vw,30px);line-height:1.4}
  .portrait{left:52%;height:clamp(360px,60vh,560px)}
  .stat{width:clamp(100px,9.2vw,140px)}
}
/* Keep the staggered metric cards separated while the text column follows the header width. */
@media(min-width:761px){
  .stats{left:calc((min(1200px,100vw - 40px) - 100vw)/2);width:100vw}
  .stat-projects{left:62.6%}
  .stat-sectors{left:71.2%}
  .stat-years{left:79.7%}
}
@media(min-width:761px) and (max-width:1400px){
  .stat-projects{left:58%}
  .stat-sectors{left:72%}
  .stat-years{left:86%}
}

/* Preserve separate text, portrait and metrics lanes as the desktop viewport narrows. */
@media(min-width:1151px) and (max-width:1400px){
  .desktop-break{display:block}
  .intro{width:36%}
  .intro h1{font-size:clamp(20px,1.75vw,24px);line-height:1.42}
  .portrait{height:clamp(360px,63vh,560px)}
  .stat{width:clamp(100px,8.2vw,116px)}
  .stat-projects{left:65%}
  .stat-sectors{left:75%}
  .stat-years{left:85%}
}

@media(min-width:951px) and (max-width:1150px){
  .desktop-break{display:block}
  .intro{width:35%}
  .intro h1{font-size:clamp(19px,1.85vw,22px);line-height:1.42}
  .portrait{top:calc(min(95.5vh,909px) - min(55vh,400px));left:54%;height:min(55vh,400px)}
  .stat{width:clamp(90px,8.5vw,100px)}
  .stat-projects{left:70%}
  .stat-sectors{left:80%}
  .stat-years{left:90%}
}

@media(min-width:761px) and (max-width:950px){
  .hero{height:950px;min-height:950px}
  .hero-content{height:100%}
  .desktop-break{display:block}
  .intro{left:20px;top:145px;width:calc(100% - 40px)}
  .intro h1{max-width:500px;font-size:21px;line-height:1.4}
  .project-card{width:220px;margin-top:28px}
  .portrait{top:auto;bottom:10px;left:50%;height:430px}
  .stat{top:330px;width:clamp(88px,10vw,100px)}
  .stat-projects{left:51%}
  .stat-sectors{left:65%}
  .stat-years{left:79%}
  .next-section{top:940px;height:110px}
  .hero::after{top:850px}
  .hero-mark{top:auto;bottom:10px}
  .name-one{bottom:0}
  .language-switch{bottom:3%}
}

@media(max-width:760px){
  .hero{height:auto;min-height:0;padding:0 18px;background:#efeff1}
  .hero-content{position:relative;left:auto;right:auto;width:100%;height:860px;min-height:860px;margin:0;padding:0;transform:none;display:block}
  .intro{position:relative;left:auto;top:auto;width:100%;max-width:520px;margin:50px 0 0;padding:0}
  .intro h1{width:100%;max-width:520px;font-size:clamp(23px,4vw,29px);line-height:1.35}
  .desktop-break{display:none}
  .project-card{position:relative;left:auto;top:auto;width:260px;min-height:0;margin:26px 0 0}
  .portrait-scene{position:absolute;inset:0;min-height:0}
  .portrait{top:auto;bottom:0;left:40%;height:clamp(300px,55vw,430px);max-width:none;transform:translateX(-50%)}
  .stats{top:auto;bottom:85px;right:0;left:auto;width:155px;height:430px;min-width:0;transform:none}
  .stat{left:0;width:135px;min-height:120px;aspect-ratio:auto;padding:12px}
  .stat-projects{left:0;top:0}
  .stat-sectors{left:0;top:135px}
  .stat-years{left:0;top:270px}
  .stat p{font-size:12px}
  .stat strong{font-size:40px}
  .hero-mark{top:auto;bottom:0;left:48%;width:min(72vw,400px);transform:translateX(-50%)}
  .next-section{top:auto;bottom:-100px;height:110px}
  .hero::after{top:auto;bottom:0;height:110px}
  .language-switch{right:18px;bottom:22px}
}
@media(max-width:520px){
  .hero{padding-inline:14px}
  .hero-content{height:900px;min-height:900px}
  .intro{margin-top:44px}
  .intro h1{font-size:22px}
  .stats{top:420px;bottom:auto;right:0;left:0;width:100%;height:125px}
  .stat{top:0;width:30%;min-height:120px;padding:10px}
  .stat-projects{left:0;top:0}
  .stat-sectors{left:35%;top:0}
  .stat-years{left:70%;top:0}
  .stat p{font-size:10px}
  .stat strong{font-size:clamp(26px,7vw,36px)}
  .portrait{left:50%;height:min(90vw,420px)}
  .hero-mark{left:50%}
}

/* One continuous background signature, capped at a 1600px composition width. */
.name-ghost{
  position:absolute;
  inset:0 auto 0 50%;
  width:min(100vw,1600px);
  height:100%;
  transform:translateX(-50%);
  overflow:visible;
  white-space:nowrap;
  pointer-events:none;
  color:#fafafd;
  z-index:1;
}
.name-ghost .name-full{
  position:absolute;
  left:50%;
  bottom:calc(100% - min(95.5vh,909px) - 30px);
  transform:translateX(-50%) scaleX(1.18);
  font-family:"Rethink Sans",sans-serif;
  font-size:min(13vw,205px);
  font-weight:600;
  line-height:.82;
  letter-spacing:-.065em;
}
@media(max-width:950px){
  .name-ghost .name-full{bottom:0;font-size:min(13vw,205px)}
}
@media(max-width:520px){
  .name-ghost .name-full{font-size:12.5vw;transform:translateX(-50%) scaleX(1.16)}
}

/* First-view reveal: follow the reading order without shifting the final layout. */
.eyebrow{
  animation:headline-enter 650ms cubic-bezier(.23,1,.32,1) 90ms backwards;
}
.intro h1 .headline-line{
  display:block;
  animation:headline-enter 750ms cubic-bezier(.23,1,.32,1) backwards;
}
.intro h1 .headline-line:nth-child(1){animation-delay:210ms}
.intro h1 .headline-line:nth-child(2){animation-delay:340ms}
.intro h1 .headline-line:nth-child(3){animation-delay:470ms}
.portrait{
  animation:portrait-enter 1100ms cubic-bezier(.23,1,.32,1) 220ms backwards;
}
.project-card,
.stat{
  animation:card-enter 850ms cubic-bezier(.23,1,.32,1) backwards;
}
.project-card{animation-delay:650ms}
.stat-projects{animation-delay:690ms}
.stat-sectors{animation-delay:810ms}
.stat-years{animation-delay:930ms}

@keyframes headline-enter{
  from{opacity:0;transform:translateY(8px)}
  to{opacity:1;transform:translateY(0)}
}
@keyframes portrait-enter{
  from{opacity:0;transform:translateX(-50%) translateY(18px) scale(.99)}
  to{opacity:1;transform:translateX(-50%) translateY(0) scale(1)}
}
@keyframes card-enter{
  from{opacity:0;transform:translateY(10px) scale(.99)}
  to{opacity:1;transform:translateY(0) scale(1)}
}
@keyframes headline-fade{from{opacity:0}to{opacity:1}}

@media(max-width:760px){
  .intro h1 .headline-line{display:inline;animation-name:headline-fade}
}

.hero .am-nav-cta{
  transition:padding 550ms cubic-bezier(.22,.61,.36,1),background-color 180ms ease;
}
.card-action{transition:background-color 180ms ease,color 180ms ease}
.card-action b{transition:transform 180ms ease}
.project-card{transition:transform 180ms ease,box-shadow 180ms ease}
.project-card:hover{transform:none;box-shadow:0 18px 48px #30285812}
.project-card:focus-visible .card-action{background:var(--violet);color:#fff}
@media(hover:hover) and (pointer:fine){
  .am-nav-cta:hover{background-color:var(--violet)}
  .project-card:hover{transform:translateY(-3px);box-shadow:0 22px 52px #30285820}
  .project-card:hover .card-action{background:var(--violet);color:#fff}
  .project-card:hover .card-action b{transform:translate(2px,-2px)}
}

@media(prefers-reduced-motion:reduce){
  .eyebrow,.intro h1 .headline-line,.portrait,.project-card,.stat{animation:quiet-enter 180ms ease-out both!important}
  @keyframes quiet-enter{from{opacity:0}to{opacity:1}}
}

/* Hero opening sequence. The portrait flies to the real responsive portrait bounds. */
.hero-intro{display:none}
.hero-intro-running,.hero-intro-revealing{overflow:hidden}
.hero-intro-running .hero-intro{
  position:fixed;z-index:9999;inset:0;display:block;overflow:hidden;
  background:#eeedf1;opacity:1;transition:opacity 850ms cubic-bezier(.23,1,.32,1),background-color 850ms cubic-bezier(.23,1,.32,1);
}
.hero-intro-revealing .hero-intro{
  position:fixed;z-index:9999;inset:0;display:block;overflow:hidden;
  background:#eeedf1;opacity:1;transition:opacity 850ms cubic-bezier(.23,1,.32,1),background-color 850ms cubic-bezier(.23,1,.32,1);
}
.hero-intro.is-resolving{background-color:transparent}
.hero-intro-glow{
  position:absolute;left:50%;top:53%;width:min(78vw,920px);aspect-ratio:1;
  border-radius:50%;background:radial-gradient(circle,#7167ff50 0%,#7167ff28 34%,#7167ff0a 59%,transparent 72%);
  filter:blur(12px);opacity:0;transform:translate(-50%,-50%) scale(.82);
}
.hero-intro.is-entered .hero-intro-glow{
  animation:intro-glow-in 900ms cubic-bezier(.23,1,.32,1) 500ms forwards;
  transition:opacity 800ms ease,transform 1000ms cubic-bezier(.23,1,.32,1);
}
.hero-intro-name{
  position:absolute;z-index:1;white-space:nowrap;color:#fff;
  font-family:"Rethink Sans",sans-serif;font-size:clamp(74px,13vw,210px);
  font-weight:600;line-height:.82;letter-spacing:-.065em;
  transition:transform 1250ms cubic-bezier(.23,1,.32,1),color 850ms ease,opacity 850ms ease;
}
.hero-intro-first{left:5vw;right:auto;top:34%;transform:translateX(130vw)}
.hero-intro-last{left:auto;right:4vw;top:62%;z-index:3;transform:translateX(-130vw)}
.hero-intro.is-entered .hero-intro-first,
.hero-intro.is-entered .hero-intro-last{transform:translateX(0)}
.hero-intro.is-entered .hero-intro-last{transition-delay:120ms}
.hero-intro-portrait{
  position:absolute;z-index:2;left:50%;top:auto;bottom:0;height:min(86svh,760px);width:auto;max-width:92vw;
  object-fit:contain;object-position:center bottom;transform:translateX(-50%) scale(1.04);transform-origin:center bottom;
  transition:transform 1150ms cubic-bezier(.23,1,.32,1);
}
.hero-intro.is-resolving .hero-intro-portrait{transform:var(--intro-target-transform)}
.hero-intro.is-resolving .hero-intro-glow{opacity:0;transform:translate(-50%,-50%) scale(1.14)}
.hero-intro.is-resolving .hero-intro-name{
  z-index:1;color:#eeedf1;opacity:0;transform:translateY(36vh) scale(.82);
}
.hero-intro.is-leaving{opacity:0;pointer-events:none}
.hero-intro-revealing .hero-intro.is-leaving{opacity:0}
.hero-intro-running .am-nav,
.hero-intro-running .hero-content,
.hero-intro-running .name-ghost,
.hero-intro-running .hero-mark,
.hero-intro-running .language-switch{
  visibility:hidden;opacity:0;
}
.hero-intro-revealing .am-nav,
.hero-intro-revealing .hero-content,
.hero-intro-revealing .name-ghost,
.hero-intro-revealing .hero-mark,
.hero-intro-revealing .language-switch{
  visibility:visible;opacity:1;
  transition:opacity 850ms cubic-bezier(.23,1,.32,1),visibility 0s;
}
.hero-intro-revealing .am-nav{transition-delay:120ms}
.hero-intro-revealing .name-ghost,.hero-intro-revealing .hero-mark{transition-delay:220ms}
.hero-intro-revealing .hero-content{transition-delay:300ms}
.hero-intro-revealing .language-switch{transition-delay:650ms}
.hero-intro-revealing .portrait{opacity:0!important;animation:none!important;transition:none!important}
.hero-intro-settling .portrait{opacity:1!important;transition:none!important}
.hero-intro-done .portrait{opacity:1!important;animation:none!important}
.hero-intro-running .eyebrow,
.hero-intro-running .intro h1 .headline-line,
.hero-intro-running .portrait,
.hero-intro-running .project-card,
.hero-intro-running .stat{animation-play-state:paused}
.hero-intro-running .portrait,
.hero-intro-revealing .portrait,
.hero-intro-settling .portrait,
.hero-intro-done .portrait{animation:none!important}
@keyframes intro-glow-in{
  to{opacity:1;transform:translate(-50%,-50%) scale(1)}
}
@media(max-width:760px){
  .hero-intro-name{font-size:15vw}
  .hero-intro-first{left:3vw;right:auto;top:37%}
  .hero-intro-last{left:auto;right:2vw;top:65%}
  .hero-intro-portrait{height:min(86svh,620px);max-width:94vw}
}
@media(max-width:760px){
  html[lang="en"] .intro h1{font-size:clamp(17px,4vw,26px);line-height:1.35}
  html[lang="en"] .intro h1 .headline-line{display:block;animation-name:headline-enter}
}
@media(min-width:761px){.portrait{top:auto;bottom:calc(100svh - min(95.5svh,909px));height:min(clamp(430px,72vh,650px),calc(100svh - 104px))}}
@media(max-width:760px){.portrait{top:auto;bottom:0}}
/* This is a standalone, viewport-height hero preview; the following section belongs to the full page. */
.next-section{display:none!important}
.hero::after{display:none!important}
@media(min-width:761px){
  .hero{height:min(100svh,900px);min-height:min(100svh,900px)}
  .portrait{bottom:0}
  .hero-mark{bottom:0}
  .name-one{bottom:0}
}
@media(prefers-reduced-motion:reduce){
  .hero-intro{display:none!important}
  .hero-intro-running,.hero-intro-revealing{overflow:auto}
}
/* Mobile-only stats carousel: desktop keeps the original three-card layout. */
.stats-pagination{display:none}
@media(max-width:760px){
  .hero-content{height:700px;min-height:700px}
  .hero-intro,
  .hero-intro-running .hero-intro,
  .hero-intro-revealing .hero-intro{display:none!important}
  .stats{
    z-index:4;top:auto;right:auto;bottom:78px;left:50%;
    width:min(70vw,300px);height:96px;min-width:0;
    transform:translateX(-50%);overflow:visible
  }
  .stats .stat{
    top:0;right:0;bottom:auto;left:0;width:100%;height:96px;min-height:0;
    display:grid;grid-template-columns:minmax(90px,.85fr) 1.15fr;
    grid-template-rows:1fr auto;align-items:center;column-gap:20px;
    padding:15px 20px;border-radius:18px;
    opacity:0;transform:translateX(14px);pointer-events:none;
    animation:none!important;
    transition:opacity 300ms cubic-bezier(.23,1,.32,1),transform 300ms cubic-bezier(.23,1,.32,1)
  }
  .stats .stat.is-active{opacity:1;transform:translateX(0);pointer-events:auto}
  .stats .stat p{grid-column:2;grid-row:1;align-self:end;font-size:13px;line-height:1.35}
  .stats .stat i{grid-column:2;grid-row:2;width:34px;height:3px;margin:8px 0 0}
  .stats .stat strong{grid-column:1;grid-row:1/3;align-self:center;font-size:clamp(36px,10vw,46px);line-height:1}
  .stats-pagination{
    position:absolute;top:calc(100% + 12px);left:50%;
    display:flex;align-items:center;justify-content:center;gap:7px;
    transform:translateX(-50%)
  }
  .stats-page{
    width:7px;height:7px;padding:0;border:0;border-radius:999px;
    background:#1113;cursor:pointer;touch-action:manipulation;
    transition:width 180ms ease,background-color 180ms ease
  }
  .stats-page.is-active{width:22px;background:var(--violet)}
  .project-card{min-height:0;padding-bottom:12px}
  .card-description{margin-top:4px}
  .card-action{margin-top:7px}
}
@media(max-width:390px){
  .hero-content{height:700px;min-height:700px}
  .stats{width:min(70vw,280px)}
  .stats .stat{grid-template-columns:minmax(82px,.82fr) 1.18fr;column-gap:16px;padding-inline:17px}
}
@media(max-width:760px) and (prefers-reduced-motion:reduce){
  .stats .stat,.stats-page{transition:none}
}

/* Preview-only continuation: keep the viewport-sized hero, then expose the next white section for scrolling. */
.hero{overflow:hidden}
.next-section{
  position:relative!important;inset:auto!important;display:block!important;
  width:100%;height:360px!important;margin:0;border-radius:64px 64px 0 0;
  background:#fff;color:transparent;z-index:auto
}
.next-section span{display:none}
@media(max-width:760px){
  .hero{height:834px;min-height:834px}
  .hero-content{height:700px;min-height:700px}
  .portrait{bottom:0;left:50%;height:clamp(380px,calc(90vw + 46px),410px)}
  .stats{bottom:28px;width:min(64vw,280px);height:84px}
  .stats .stat{height:84px;padding:12px 18px;touch-action:pan-y;cursor:grab}
  .stats .stat:active{cursor:grabbing}
  .stats .stat i{margin-top:6px}
  .next-section{height:280px!important;border-radius:42px 42px 0 0}
}
@media(max-width:390px){.hero-content{height:790px;min-height:790px}.stats{width:min(64vw,270px)}}
/* Restore the slightly overlapping desktop composition and bring hovered cards forward. */
@media(min-width:761px) and (max-width:1450px){.stats .stat{width:clamp(121px,10.5vw,151px)}}
@media(min-width:1451px){.stats .stat{width:clamp(121px,10.5vw,207px)}}
@media(hover:hover) and (min-width:761px){
  .stats .stat{pointer-events:auto;transition:transform 260ms cubic-bezier(.2,.75,.25,1),box-shadow 260ms ease,border-color 260ms ease}
  .stats .stat:hover{z-index:10;transform:translateY(-8px) scale(1.035);border-color:var(--violet);box-shadow:0 26px 60px #29233e24}
}
@media(min-width:761px){.stats .stat{translate:0 -14px}}
@media(min-width:761px){.project-card{aspect-ratio:1.676;padding-top:calc(clamp(15px,.9vw,25px) + 3px);translate:none}}
.card-action b{font-weight:600;-webkit-text-stroke:.15px currentColor}
@media(min-width:761px){.portrait{translate:-10px 0}}

/* Playground integration: the lower grey fade belongs to the hero, while the real page sections follow it. */
#hero::after{content:"";display:block!important;position:absolute;z-index:4;pointer-events:none;left:-2%;right:-2%;top:auto;bottom:0;height:clamp(56px,7.5vh,72px);background:linear-gradient(to bottom,rgba(217,217,217,0),rgba(217,217,217,.84))}
@media(max-width:760px){#hero::after{height:88px;z-index:3}}
.hero-intro-running .hero-intro::after,.hero-intro-revealing .hero-intro::after{content:"";position:absolute;z-index:4;left:0;right:0;top:auto;bottom:0;height:clamp(58px,8vh,74px);pointer-events:none;background:linear-gradient(to bottom,rgba(238,237,241,0),rgba(217,217,217,.9))}
.card-actions{display:flex;align-items:center;gap:10px;width:100%;margin-top:clamp(10px,.9vw,17.5px)}
.card-actions .card-action{flex:1;width:auto;min-width:0;margin-top:0}
.cv-button{position:relative;display:grid;flex:0 0 42px;width:42px;height:42px;place-items:center;overflow:hidden;border-radius:50%;background:#e8e8eb;color:#17171a;text-decoration:none;transition:background-color 220ms ease,color 220ms ease,transform 220ms ease,box-shadow 220ms ease}
.cv-button:hover,.cv-button:focus-visible{transform:translateY(-2px);background:#111;color:#fff;box-shadow:0 7px 18px #15151a24}
.cv-button:focus-visible{outline:2px solid var(--violet);outline-offset:3px}
.cv-label,.cv-document{position:absolute;transition:opacity 180ms ease,transform 220ms ease}
.cv-label{font-size:12px;font-weight:650;letter-spacing:.04em;opacity:0;transform:scale(.72)}
.cv-document{width:19px;height:19px;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.cv-button:hover .cv-label,.cv-button:focus-visible .cv-label{opacity:1;transform:scale(1)}
.cv-button:hover .cv-document,.cv-button:focus-visible .cv-document{opacity:0;transform:scale(.72)}
@media(max-width:760px){.card-actions{gap:8px;margin-top:12px}.card-actions .card-action{min-width:0;flex:1;height:40px;padding:0 10px}.cv-button{flex-basis:40px;width:40px;height:40px}.name-ghost{display:none!important}#hero::after{left:50%;right:auto;width:100vw;transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){.cv-button,.cv-label,.cv-document{transition:none}}

/* Keep the mobile portrait flush with the next section. */
@media(max-width:760px){.hero-content{height:790px;min-height:790px}}

/* Mobile home integration fixes: keep the intro clear of the sticky site nav,
   match the reference card-to-portrait spacing, and layer the carousel above the fade. */
@media(max-width:760px){
  .am-hero{margin-top:0}
  #hero{height:810px;min-height:810px}
  #hero .hero-content{height:790px;min-height:790px;padding-top:0;z-index:auto}
  #hero .intro{margin-top:20px}
  #hero .portrait{height:clamp(340px,calc(88vw + 18px),370px);bottom:0}
  #hero .card-actions .card-action{justify-content:center;gap:8px}
  #hero .stats{z-index:5}
  #hero::after{z-index:4}
}
@media(max-width:390px){#hero .hero-content{height:790px;min-height:790px}}
.card-arrow{display:block;flex:0 0 16px;width:16px;height:16px;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round;transition:transform 180ms ease}
@media(hover:hover){.project-card:hover .card-arrow{transform:translate(2px,-2px)}}
@media(prefers-reduced-motion:reduce){.card-arrow{transition:none}}

/* Mobile hero: extend behind the sticky header, use 20px gutters, and keep
   the portrait flush with the next section without changing its top position. */
@media(max-width:760px){
  .am-hero{margin-top:-90px}
  #hero{padding-inline:20px;height:810px;min-height:810px}
  #hero .hero-content{height:810px;min-height:810px;margin-top:0;padding-top:0}
  #hero .intro{width:100%;max-width:none;margin-top:0;text-align:center;transform:translateY(137px)}
  #hero .eyebrow{margin-left:auto;margin-right:auto;text-align:center}
  #hero .intro h1{margin-left:auto;margin-right:auto;text-align:center}
  #hero .project-card{left:50%;margin-left:0;translate:-50% 0;align-items:center;text-align:center}
  #hero .card-description{font-size:13px}
  #hero .card-actions .card-action{font-size:15px;line-height:1}
  #hero .hero-glow{top:auto;left:50%;bottom:2%;width:min(130vw,640px);height:min(115vw,520px);margin:0;opacity:1!important;transform:translateX(-50%)!important;background-image:radial-gradient(ellipse at center,rgba(100,88,255,.24) 0%,rgba(100,88,255,.13) 42%,rgba(100,88,255,0) 72%);will-change:auto}
  #hero .portrait{height:calc(clamp(340px,calc(88vw + 18px),370px) + 20px);bottom:0}
  #hero .eyebrow{animation:headline-enter 850ms cubic-bezier(.23,1,.32,1) 120ms both!important}
  #hero .intro h1 .headline-line{display:block;animation:headline-enter 950ms cubic-bezier(.23,1,.32,1) both!important}
  #hero .intro h1 .headline-line:nth-child(1){animation-delay:280ms!important}
  #hero .intro h1 .headline-line:nth-child(2){animation-delay:480ms!important}
  #hero .intro h1 .headline-line:nth-child(3){animation-delay:680ms!important}
  #hero .project-card{animation:card-enter 1000ms cubic-bezier(.23,1,.32,1) 1150ms both!important}
  #hero .portrait{animation:portrait-enter 1400ms cubic-bezier(.23,1,.32,1) 550ms both!important}
  #hero .stats{animation:mobile-carousel-enter 1100ms cubic-bezier(.23,1,.32,1) 1450ms both!important}
  #hero .stats-pagination{animation:mobile-carousel-enter 900ms cubic-bezier(.23,1,.32,1) 1600ms both!important}
  #hero .stat{animation:none!important}
}
@keyframes mobile-carousel-enter{from{opacity:0}to{opacity:1}}
@media(max-width:760px) and (prefers-reduced-motion:reduce){
  #hero .eyebrow,#hero .intro h1 .headline-line,#hero .project-card,#hero .portrait,#hero .stats,#hero .stats-pagination{animation:mobile-carousel-enter 180ms ease-out both!important;animation-delay:0ms!important}
}

/* Escala tipográfica del hero en escritorio: dos tamaños pequeños (13 y 15 px) y el título un poco más grande. */
@media(min-width:761px){
  body .hero-content .intro h1{font-size:min(clamp(24px,max(calc(.806vw + 15.75px),calc(1.55vw + 4px)),32px),calc(4.14vw - 27.6px))}
  body .hero-content .intro .eyebrow{font-size:15px}
  body .hero-content .intro .card-heading{font-size:15px}
  body .hero-content .intro .card-description{font-size:13px}
  body .hero-content .stat p{font-size:13px}
  body .hero-content .cv-label{font-size:13px;font-weight:600}
  body .am-nav-status-text{font-size:15px}
  body .am-language-option{font-size:13px}
  body .hero-content .intro .project-card{min-width:268px;padding-inline:clamp(18px,1.2vw,24px);aspect-ratio:auto;min-height:0}
}

/* Pantallas medianas: el hero no tiene relleno lateral y el contenido queda pegado a los bordes. */
@media(min-width:761px) and (max-width:1399px){
  body .hero .hero-content{width:calc(100% - 2*clamp(24px,3.5vw,48px))}
  body .hero-content .stats{left:0;right:0;width:auto}
  /* Las tarjetas de estadísticas se anclan al borde derecho del contenido para no salirse. */
  body .hero-content .stats .stat{width:clamp(104px,9.2vw,132px)}
  body .hero-content .stats .stat-years{left:auto;right:0}
  body .hero-content .stats .stat-sectors{left:auto;right:calc(clamp(104px,9.2vw,132px)*.9)}
  body .hero-content .stats .stat-projects{left:auto;right:calc(clamp(104px,9.2vw,132px)*1.8)}
}

/* Título del hero en pantallas medianas: más angosto el contenido, más pequeño el título para que siga en 3 líneas. */
@media(min-width:761px) and (max-width:1271px){
  body .hero-content .intro h1{font-size:min(clamp(20px,calc(1.8vw + 2px),24px),max(calc(2.35vw - 4.85px),20px))}
}

/* Hero en móvil: escala de 15 y 13 px, carrusel de datos más angosto y centrado, y puntos más separados. */
@media(max-width:760px){
  /* Escala: 15 px para el texto de apoyo y 13 px para las notas, como en escritorio. */
  body .hero-content .intro .eyebrow{font-size:15px;color:#5f5e68}
  body .hero-content .intro .card-heading{font-size:15px}

  /* Carrusel de datos: más angosto y centrado. */
  body .hero-content .stats{width:226px;left:50%;right:auto;transform:translateX(-50%)}
  body .hero-content .stats .stat{width:226px;min-height:0}
  body .hero-content .stats .stat strong{font-size:36px}
  /* Contenido centrado verticalmente y menos relleno arriba. */
  body .hero-content .stats .stat{align-content:center;align-items:center;padding:14px 18px;height:auto}
  body .hero-content .stats .stat strong{margin:0;align-self:center}
  body .hero-content .stats .stat p{font-size:13px}

  /* Puntos: más separados y un poco más grandes. */
  body .hero-content .stats-pagination{gap:12px}
  body .hero-content .stats-pagination .stats-page{width:8px;height:8px}
  body .hero-content .stats-pagination .stats-page.is-active{width:26px}
}

/* Tarjetas de datos en escritorio: al pasar el cursor aparece un icono a media altura, sobre el borde derecho.
   Ojo: en el HTML las clases de la 2.ª y 3.ª tarjeta están cruzadas (stat-sectors = años, stat-years = sectores). */
@media(min-width:761px) and (hover:hover){
  body .hero-content .stats .stat{pointer-events:auto;--stat-icon:clamp(44px,3.8vw,60px)}
  body .hero-content .stats .stat:hover{z-index:6}
  body .hero-content .stats .stat::after{content:"";position:absolute;top:50%;right:calc(var(--stat-icon) * -.38);width:var(--stat-icon);height:var(--stat-icon);background:center/contain no-repeat;opacity:0;transform:translateY(-50%) scale(.7) rotate(-10deg);transition:opacity .25s ease,transform .4s cubic-bezier(.22,.61,.36,1);pointer-events:none;filter:drop-shadow(0 8px 14px rgba(17,17,19,.22))}
  body .hero-content .stats .stat:hover::after{opacity:1;transform:translateY(-50%) scale(1) rotate(0)}
  body .hero-content .stats .stat-projects::after{background-image:url(../images/stat-hover-proyectos.png)}
  body .hero-content .stats .stat-sectors::after{background-image:url(../images/stat-hover-anos.png)}
  body .hero-content .stats .stat-years::after{background-image:url(../images/stat-hover-sectores.png)}
}
@media(prefers-reduced-motion:reduce){
  body .hero-content .stats .stat::after{transition:opacity .2s ease;transform:translateY(-50%)}
}

/* Móvil: la tarjeta de datos lleva el icono fijo a la izquierda (icono, número y texto). */
@media(max-width:760px){
  body .hero-content .stats{width:244px}
  body .hero-content .stats .stat{width:244px;grid-template-columns:44px auto auto;column-gap:10px;justify-content:center}
  body .hero-content .stats .stat strong{grid-column:2;grid-row:1/3}
  body .hero-content .stats .stat p{grid-column:3;grid-row:1}
  body .hero-content .stats .stat i{grid-column:3;grid-row:2}
  body .hero-content .stats .stat::after{content:"";grid-column:1;grid-row:1/3;align-self:center;width:44px;height:44px;background:center/contain no-repeat;filter:drop-shadow(0 6px 10px rgba(17,17,19,.2))}
  body .hero-content .stats .stat-projects::after{background-image:url(../images/stat-hover-proyectos.png)}
  body .hero-content .stats .stat-sectors::after{background-image:url(../images/stat-hover-anos.png)}
  body .hero-content .stats .stat-years::after{background-image:url(../images/stat-hover-sectores.png)}
}

/* Móvil muy angosto: las tres líneas del título miden ≈16 em; el tamaño se ajusta al ancho para que no se partan (22 px desde ~400 px de ancho). */
@media(max-width:520px){
  body .hero-content .intro h1{font-size:clamp(16px,calc((100vw - 40px)/17.3),22px)}
}

/* Tarjetas de datos: la que "se activa sola" en el bucle se ve igual que con el cursor encima. */
@media(min-width:761px) and (hover:hover){
  .stats .stat.is-lit{z-index:10;transform:translateY(-8px) scale(1.035);border-color:var(--violet);box-shadow:0 26px 60px #29233e24}
  body .hero-content .stats .stat.is-lit{z-index:6}
  body .hero-content .stats .stat.is-lit::after{opacity:1;transform:translateY(-50%) scale(1) rotate(0)}
}

/* Con una tarjeta de datos activa (cursor o bucle), las otras dos bajan al 80 % de opacidad. */
@media(min-width:761px) and (hover:hover){
  .stats .stat{transition:transform 260ms cubic-bezier(.2,.75,.25,1),box-shadow 260ms ease,border-color 260ms ease,opacity .35s ease}
  .stats:has(.stat.is-lit) .stat:not(.is-lit),.stats:has(.stat:hover) .stat:not(:hover){opacity:.8}
}
@media(min-width:761px) and (hover:hover){
  .stats .stat p,.stats .stat strong,.stats .stat i{transition:opacity .35s ease}
  .stats:has(.stat.is-lit) .stat:not(.is-lit) :is(p,strong,i),.stats:has(.stat:hover) .stat:not(:hover) :is(p,strong,i){opacity:.6}
}

/* Tarjeta de datos activa: borde animado morado y blanco (el ángulo --am-ang lo anima .hero en theme.css). */
@media(min-width:761px) and (hover:hover){
  body .hero-content .stats .stat:hover,body .hero-content .stats .stat.is-lit{border-width:1.5px;border-color:transparent;background:linear-gradient(#fcfcfd,#fcfcfd) padding-box,conic-gradient(from var(--am-ang),rgba(255,255,255,0) 0 50%,#5552ff 72%,#fff 90%,rgba(255,255,255,0) 100%) border-box}
}

/* Titular del héroe: un poco menos de espaciado entre letras. */
@media(min-width:761px){body .hero .intro h1{letter-spacing:-.025em}}

/* Pantallas grandes: tope de tamaño para las tarjetas de datos y la tarjeta del aliado, para que no sigan creciendo con el ancho. */
@media(min-width:1451px){
  body .hero-content .stats .stat{width:clamp(121px,10.5vw,168px)}
  body .hero-content .stats .stat strong{font-size:clamp(44px,2.85vw,46px)}
  body .hero-content .intro .project-card{width:min(15.6vw,280px)}
}

/* Pantallas grandes: las tarjetas de datos van siempre encimadas (la 2.ª y la 3.ª se colocan según el ancho de la tarjeta), nunca separadas. */
@media(min-width:1451px){
  body .hero-content .stats{--sw:clamp(121px,10.5vw,168px)}
  body .hero-content .stats .stat-projects{left:62.6%}
  body .hero-content .stats .stat-sectors{left:calc(62.6% + var(--sw) * .93)}
  body .hero-content .stats .stat-years{left:calc(62.6% + var(--sw) * 1.86)}
}

/* Pantallas muy grandes: la columna de texto de la izquierda se desplaza hasta que su margen izquierdo iguala el margen derecho de las tarjetas, para que no quede pegada a la foto. */
@media(min-width:1451px){
  body .hero-content{--sw:clamp(121px,10.5vw,168px)}
  body .hero-content .intro{translate:calc(-1 * max(0px, 12.6vw - 600px + 2.79 * var(--sw))) 0}
}